Background Image being cropped in Internet Explorer

Question

I have set a background that I am expecting to be the width of the screen behind some other divs.

I have set the z-index to -1 so it appears behind 2 divs which works fine in Chrome however, IE seems to cut the background off at the width of the containers before and after (980px)

My Code:

.container { 
  width: 980px; 
  background: transparent; 
}
.container-footer { 
  position: relative;
  background: url(images/footer-bg.png) no-repeat center top; 
  width: 100%;
  z-index: -1;
  margin-top: -100px;
  height: 200px;
}

<div class="container"> .. content .. </div>
<div class="container container-footer"></div>
<div class="container"> .. content .. </div>

Here is the effect in Chrome:

Here is the effect in Internet Explorer 8:

The complete code can be found here: http://www.signatureblindsbrisbane.com.au/ (down the bottom (Signature Partners area)

Answer 1

You have a couple of issues with your Z-index.

First, DOM order originally dictates the Z-index, so the first DIV element is on the bottom (z-index: 1), second in the middle (2), and third on absolute top (3).

Second, z-index does not work at all unless you apply a specific position attribute (such as absolute or relative).