...

View Full Version : Background image gets displaced in FF



philosp
10-27-2006, 10: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:
http://www.atividade.com.br/licksassociados/?pagina=servicos

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?

****EDIT****
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).
****/EDIT****

I appreciate your help,

Phil

Arbitrator
10-28-2006, 02: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.

philosp
10-28-2006, 02: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?

Arbitrator
10-28-2006, 03: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.Ē



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum