View Full Version : Background image gets displaced in FF

10-27-2006, 11:31 PM
Hello all!
I have a mysterious problem and I haven´t found a single reference to it.
I have a tableless page that uses strict xhtml doctype:

It is centered using Simon Coggins' technique of giving the page container an absolute 50% position and a negative margin.
Inside the page, the content div has a background image, which is supposed to be fixed to the top-right corner.
Now the fun part: IE6 renders it OK, FF and IE7 don´t. I haven´t tested with other browsers.
Assuming IE6 is rendering it incorrectly (which it normally does), what would be the correct way of doing it?

Actually, I just found a similar problem in this post (http://www.codingforums.com/showthread.php?t=98005).
I tried removing the "fixed" property from the background, and voila, the scene is the exact opposite:
FF keeps the background fixed, the way I intended it to (although I can´t understand why).
IE6 does what I thought it would do: prints the background only once.
You can see an example of this new situation in this link (http://www.atividade.com.br/licksassociados/?pagina=empresa).

I appreciate your help,


10-28-2006, 03:17 AM
Internet Explorer doesn’t support the fixed value correctly. When you use background-attachment: fixed, that means “fixed” relative to the viewport, not the element itself. In other words, Firefox positions the background image at the top right of the page instead of at the top right of the div element; that’s why you can’t see it unless you make the window very small. Fixing the background locally to an element is done via CSS3’s background-position: local declaration; unfortunately, I don’t believe that any browser has implemented it yet.

Now, you could work around that by providing the correct code normally to standards-compliant browsers and serving a conditional comment (CC) to Internet Explorer 6 to override that and exploit it’s rendering flaw. However, while it’ll display fine in Internet Explorer 6 and the others, Internet Explorer 7 still won’t look like you want it to; I’m not sure why either. In the worst case, you can simply hide the background entirely from IE7 using a version-specific CC.

By the way, the star-HTML exploit doesn’t work in Internet Explorer 7.

10-28-2006, 03:54 AM
Thank you very much for your answer, Arbitrator!
Now, I still have a question about background-image behavior: Why does FF render the background as if it was fixed? I mean, that's exactly what I wanted, but it goes against my understanding of what "background-position: scroll" is supposed to do. After removing the "fixed" property I expected it to behave like it does on IE6 and 7. Could it be a FF issue instead?

10-28-2006, 04:08 AM
From http://www.quirksmode.org/css/background.html with regards to background-attachment: scroll: “The background image scrolls along with the document. Since scrolling a div is not scrolling the document, the background image of my div with overflow: auto shouldn't react.”