SaveTheManatees
New Member
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: \[code\] <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>\[/code\]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?\[code\]#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;}\[/code\]