Resizeable background image vs IE8

Mexi · May 24, 2010

Hi there,

I've recently completed a site built on a resizeable background image (as set out in this tutorial: http://css-tricks.com/how-to-resizeable-background-image/). It consists of a image styled to behave like a background image, except that it scales to fit any browser window. What this means is that all of the other content requires a z-index higher than that of the image.

Everything was working just fine until I previewed it in IE8, where it shoved all of the navigation and content to below the background image. I've tried tweaking the z-index values on several styles but so far nothing has worked.

I've set up a test page here: http://www.armourdillobrand.com/test/index.html

The CSS file can be found here: http://www.armourdillobrand.com/test/css/style.css

I did a search on here first but couldn't find anything that might help. I've also scoured Google extensively for answers and again, nothing has worked. If anyone has a minute (or 20) to take a look at this I'd be extremely grateful.

Cheers,

John

Wickham · May 24, 2010

First of all, you haven't got a doctype from here

http://www.w3.org/QA/2002/04/valid-dtd-list.html

I suggest this one to suit your coding:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

which should be above the html tag, first item in the html file code.

Second, try z-index: -1 instead of 1 for the image style:-

.bg {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}

which should put it behind everything.

Your code seems to be similar to mine here:-

http://www.wickham43.net/backgroundfullwidthflexible.html

which does work in IE8.

Edited May 24, 2010 by Wickham

Mexi · May 24, 2010

That worked! You are a legend.

Thank you so much.

Here is the complete site: http://www.armourdillobrand.com

Cheers,

John

Sign In

Resizeable background image vs IE8

Recommended Posts

Mexi

Wickham

Mexi

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Store

Support