The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS overlapping background image problem Re: overlapping background image problem


It looks like to me that you’re going about it the wrong way. By having one wide image with transparency you’re basically covering up everything with your image (like using a clear gif to try and protect an image from being stolen), not to mention that someone with IE6 will probably not see any of your content because it’s probably a png-24 so it’ll show up white.

What you need to do, is use two images, one on the left, and one on the right and absolutely position them with a z-index. Just make sure that your wrapper, or container div has a position:relative tag. I’m pretty sure z-index will still follow the rules if it is inside a div with relative positioning.

#wrapper {width: 900px; margin: 0 auto; position: relative;}
.cloudsLeft {position: absolute; width: 50px; left: 0; top: 0; bottom: 0; background: url(‘leftClouds.png’) repeat-y; z-index: 50;}
.cloudsRight {position: absolute; width: 50px; right: 0; top: 0; bottom: 0; background: url(‘rightClouds.png’) repeat-y; z-index: 50;}


Your content