Safari 3.1 on Windows Problems Displaying A Background Image On a Body Tag
[UPDATE: panic over. Let's just call it user error/stupidity and assume that they won't be naming a bug after me.]
I’m currently developing a site that uses a very common technique of tiling a background image on the body tag in css.
I tested the site in Safari 3.1 for Windows and the image would not display. It works fine in all other browsers.
I then moved the css for the background image into a div tag that wraps the entire site and hey presto it works as expected. I didn’t give it much more though until just now.
I’ve just been to look at Adobe’s new Photoshop Express website in Safari 3.1 for windows and they have exactly the same problem. Nice to know I’m in good company!
They are using the same technique e.g.
body {
background-image:url(assets/landing/background.jpg);
background-repeat:repeat;
}
Is anyone else experiencing this?
I can’t show you my site as it’s still in development, but the Photoshop Express site is here www.photoshop.com/express/landing.html
delete the “@charset “UTF-8″;” at the top of your CSS
jason Gillard
March 27, 2008
Thanks Jason
I wish that were the cause, but on my site I’m using good old fashioned charset=iso-8859-1 not UTF-8. Adobe are using UTF-8 on their site.
I’ve had the opportunity to check it on Safari on my Mac and it’s fine it just seems to affect the windows version.
Maybe it’s something to do with the DocType. I’ll investigate further.
blueclock
March 27, 2008
oops, I still had a user style sheet active that was interfering with other sites.
blueclock
March 27, 2008
Same problem here..
Here is my code:
body{bg-color:#fff; background-image:url(img/sfondo.jpg);
background-repeat:no-repeat;
background-position:top, left;
background-attachment: fixed;}
on Safari for Windows it is displayed twice, one with a 100 px padding on top, the second with a 100 px padding on left… no problem elsewhere..
lila
April 23, 2008
Hi Lila
You have a mistake in your CSS.
Remove the comma between top and left.
So
background-position: top, left;
just becomes
background-position: top left;
blueclock
April 23, 2008