Safari and bg image problem

B

bobbyfett

Registered
can any one help me....pleeeaaaase, I am having real problems with large background images in safari they seem to stick to the bottom of the browser so when you resize the top disappears. I have used the basic code;

<body>
<background="images/sbpback.gif" topmargin="0" marginheight="0">
</body>


Is it me being really stupid? I am only a gromit so even if the answer is really obvious please say.
 
Seems like I have wasted an afternoon trying to fix the impossible. seems to me the way safari attaches background images is all topsy tervy, I tried it with css and it should be -
background-position:top left;

but I have to attach it -
background-position:bottom left;

for it to work correct in safari but this way it doesn't display correct in ie or netscape...grrrrrr

<html>
<head>
<style type="text/css">
body
{
background-image:
url("../images/sbp_back.gif");
background-position:
bottom left; background-repeat: no-repeat
}
</style>
</head>
<body>
</body>
</html>

If anyone knows of any work-arounds I'rd love to hear! : )
 
Pass it on to Dave Hyatt, the man responsible for WebCore, the rendering engine in Safari. He's got a BLOG where he solicits bugs/feedback here
 
The following seems to behave well in all browsers:

Code: 
<html> 
<head> 
<style type="text/css"> 
body {
  background-image : url("back.jpg"); 
  background-position : 0px 0px;
  background-repeat: no-repeat 
}
</style> 
</head> 
<body> 
Hi there!
</body> 
</html>

hth,
bear
 
I'm at work right now -- where I'm stuck using Windoze -- so I can't see what the behavior is on Safari. If it's still "bottoming" the image, that's really wierd since my test case (using an image of my own) worked fine.

I'll explore a bit more for you tonight and see if we can't beat this!

bear
 
Oh, that is so weird!

At least I figured out what is happening. As you discovered, when the background image is longer than the container (my test image was not, which is why I didn't see the problem in my test case), Safari aligns the bottom of the image to the bottom of the container and crops the top.

This is clearly a Safari bug and you should report it using your test case.

As far as work-arounds, I didn't have much luck! I tried using the image as the background of a full-page table, a full-page div, a floating div, and so on. All containers exhibited the same symptoms. <bear is now officially pissed off>

One possible suggestion, not without its own drawbacks:

Your background image is huge because you put all that blue background around it, expecting the browser (correctly) to just crop off what's in excess. You might consider cropping down the image to just the pertinent image, and set a background-color rule on the body to set the background color to the blue which will then fill any area that the background image doesn't cover.

(This might be a good suggestion in any case since it will allow you to down-size your background image for faster loading).

Not a great solution to your problem though, since if the user make the window smaller than the cropped background image, it'll start doing the same weirdness. But at least it'll display ok if they don't make the window too small.

Any other HTML gurus out there got any ideas for a work-around?

My professional pride forces me to continue to ponder the issue. I'll let ya know if my feeble brain comes up with anything!

bear
 
Thanks for all your help BBear, it is a very strange problem that has to be a safari bug I can see no logic to why any one would want it to behave like that.

Good idea about cropping the image down and setting the background colour around it, didn't think of that...dooh Thats just good working practice.

As you say Bear if anyone else would like ago please do, but I don't fancy your chances. One bear with a sore head is quite enough ; )

Once again I can't THANK YOU enough for your troubles. I have submitted the page using the bug report so we can only hope somebody picks it up for the next release.

Bobbyfett
 
that is 'kin weird, it seems to be working ok now on my machine, something very spooky is going on. It is certainly not displaying the same as yesterday cause it is fine or perhaps I am going mad weeble click click.

I changed the code slightly by giving the image a preload, (which doesn't seem to work anyway) and reduced the image as suggested, but I haven't changed anything else.

Oh well who am I to argue with the powers that be.

Bobbyfett
 
Can anyone make the background-position element work in Safari ? I've tried values (% and px) and absolutes (btootom left), it won't work. :(
 
It works for a page on my site in Safari. Correctly displays the image at 0% 0% then repeats it down. You can check it out here: Why Darkshadow? (I've posted this link before, it's how I got my name, my weird dream - I think you actually read it, Toast).

The only thing I can think of that might be different (and I'm not sure here) is that the style stuff is part of that html file rather than being linked to in a separate file (that's why I'm not sure, I don't know if you're linking to an extenal css file or not).
 
Yeah, I did read some time ago - but the use of background-position is not obvious on this page indeed ;)
 
You must log in or register to reply here.
Back
Top