Re: overlapping background image problem

[Cotton]

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.

Code:

CSS
#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;}

HTML

Your content