Background position fixed and z-index

I have two versions of a page online and would like to target different browsers to use different versions. The fixed background image on one breaks in Firefox Windows and IE 8 or less. The more advanced page uses a fixed background image in the footer so that the page scrolls behind the image, which has a z-index. Works fine in IE9, up-to-date Firefox on OS X, Safari, Opera and Chrome. I would like to allow this page to be viewed by the most current browsers and refer others to the less exciting page. Inspired by Zen Garden’s “Under the Sea”. Please help.

version one (generic works for all except IE6):

version two (works in all up-to-date browsers):


If you add the following then the fixed footer should work cross browser:

add/update this to .footer:

width: 1083px;
margin-left: -542px;
left: 50%;

hope this helps

HI welcome to Sitepoint :slight_smile:

Kylle’s solution above should work but the cause of the problem is the text-align:center on the body. Just remove text-align:center and it will work in IE7+.

The reason is that when you place an absolute element without using co-ordinates then IE also takes into account the text alignment and if it is not text-align:left the absolute element is then offset by that text alignment. Using co-ordinates forces the issue but sometimes you don’t want co-ordinates as you want the element to move in its current context so just make sure that text-align:left is set on a parent of the fixed/absolute element.

There are a few things that need tidying up :slight_smile:

You have corrupt conditional comments as there needs to be a space before the 8 in “lte IE 8” so luckily the styles were ignored as none of those rules are in fact needed. You should only have the extra rules in the IE stylesheet and not a whole stylesheet again. Your page doesn’t actually need any help for IE7 plus so you only need to include rules for IE6 if you want to support it.

You have also included the style tag in the css file which is not allowed as the style tag is an html element and only belongs in the html. Just add css and css comments to the css file - nothing else.

Your page is lacking a bit in structure as you have no H1 (the most important element on the page) and you are using breaks to make space which is not their job. Use css to make space with padding/margins on existing elements.

Headings should also be in logical order and you can’t jump straight to an h5 from an h2:

	<h2 id="previewparty">Gala Preview Party</h2>
								<h5>the Joseph &amp; Robert Cornell Memorial Foundation,<br/>
										Gala and Signature Sponsor</h5>
								<h3>Friday, March 23rd, 6:00 to 9:00 PM <br/>
										Main Street Arena, on the Mall across from the Omni</h3>
								<h4>Tickets by Reservation Only and Limited: $55 /$100 per couple</h4>

It should run h2 - h5 or h2 h3, h2, h3 h4 etc… Also make sure that they really are headings identifying sub sections and not just because you want bold text etc.

You also have a lot of empty divs where you have applied background images ans that is ok if they are just decoration but be careful if they are important to content as screenreaders and search engines will see no content. Use an image replacement technique id they are important content or use the actual image in the html. If the images are just wallpaper then it doesn’t matter and can stay ion the background.

Lastly that footer image is nearly 800k and probably ten times the size of my maximum. Do you really want it that big and obscuring the whole screen?. Mobile users will get the image and nothing else I would imagine.

Thank you for all your assistance. I did make the changes recommended to the .footer css and saw that the page did work in IE 7-9. Many thanks!
Now I have reloaded the page onto the site with the recommended fix. I also made the image in the footer smaller, but plan to eliminate it and almost all images in a mobile devise version. However, one problem persists:
In all Firefox versions (MAC and PC) except version 8, the image in the footer (the crowd) is not fixed to the bottom of the window but dead center (y axis).

Any suggestions?
Please See:

Have you refreshed those older versions of Firefox? I just checked in FF3 for Mac and it sat at the bottom of the screen just fine.

The page does work in Firefox 8, but not in 6 and 7. I am concerned about folks with older versions. 8 is a very new version (this fall).

I can’t thank you all enough. I haven’t created any Web sites or pages for over 6 years so this project has been a learning experience. I am working pro bono for a non profit. The Web site advertises a fund raiser. So, my final question is this: what is going on with the lack of support of fixed background images in Firefox prior to the latest upgrade? I used adobe’s Web Browser Lab to view the old and new browsers on PC and MAC.


The image is appearing for me in FF2 and I would hazard a guess that its working in FF1 also.

It’s probably a bug in adobe lab or the fact that they can’t be bothered to wait for that massive 800k image to load and you get your screenshot before its even loaded. Browsercam has a 15 second limit and if the image hasn’t loaded in that time you won’t see it.


Here’s some browsercam screenshots.