Elevate background image over content

Question

OK, so what I would like to have happen is what I've set as a background image to display on top of all other elements on the page - set on the right, half on the Content block, half off to the side... currently I have the structure of:

    <div id="SideImage">
    <div id="Contain">
    <div id="Dash"></div>
    <div id="content">
    <h1>Heading 1</h1>
    <p>Content</p>
    </div>
    <div id="Footer">
    <p>Footer Content</p>
    </div>
    </div>
    </div>

CSS looks like the following, z-index isn't working when I use FireBug, If I remove the background color from the Contain css I can see the full image, but I want that SideImage OVER the Contain background, Dash background and footer. The only other thing I can think of is setting a Div above the SideImage Div with a white background color that is only a specific width, and removing the background color from the Contain Div. Any ideas?

#Contain {
background-color: #FFFFFF;
margin: 0 auto;
position: relative;
text-align: left;
width: 850px;
z-index: 1;}

#Dash {
background-image: url("/23456jjsg886635kksjp/EQI/EQIImages/dash.png");
float: none !important;
height: 10px;
position: absolute;
top: 169px;
width: 850px;
z-index: 2;}

#content {
border-left: 2px solid #C5DFF3;
border-right: 2px solid #C5DFF3;
float: left;
position: relative;
width: 846px;
z-index: 3;}
#Footer {
background-color: #C5DFF3;
clear: both;
height: 60px;
padding-top: 5px;
position: relative;
width: 850px;
z-index: 4;}

#SideImage {
background-image: url("/23456jjsg886635kksjp/EQI/EQIImages/SideImage.png");
background-position: 85% top;
background-repeat: repeat-y;
position: relative;
z-index: 5;}

JSFiddle of code above

Answer 1

Z-index can be a fickle mistress. I usually resort to content rendering order for something like this. Based on the above markup and what you have in mind, I'm leaning toward agreeing that it's not possible to have the background of the containing #SideImage be "on top" of any of its contents. See the diagram in that Smashing link for more information.

If you added the element <div id="SideFill" class="ir"></div> you could make the changes to your css:

#SideImage {
  width:100%;
  position:relative;
}
#SideFill {
  position:absolute;
  width:15%;
  height:100%;
  top:0;
  right:0;
  background:transparent url("/23456jjsg886635kksjp/EQI/EQIImages/SideImage.png") repeat-y 0 0;
}

Answer 2

OK this is where I finally ended up for the HTML on the page.

<div id="Contain">
  <div id="SideImage" class="ir">&nbsp;</div>
</div>

For the CSS I ended at

#SideImage {
  background: url("/myLink/SideImage.png") repeat-y scroll 0 0 transparent;
  height: 100%;
  left: 748px;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 30;
}