Transparent PNG behind transparent DIVs

[StaceyB]

Hi! In need of some CSS expertise... I have a background image and opaque divs. I am trying to have '#bgGen' show as a background image but in front of '.mybg.jpg'. So, in my html I have the following:

<div id="bgGen">

My CSS is the following:

/* Background image */
body { background-image:url('mybg.jpg');
background-attachment: fixed;
}

/* Middle layer for background-- not working */
#bgGen {
	background-image: url('mymiddlebg.png');
	background-position: center center;
	background-repeat: repeat-y;
}

/* Front Divs with content and opaque background*/
.mycontentdiv {
    background: none repeat scroll 0 0 transparent !important;
}

Hope I explained this correctly... The only way I'm seeing my png is to set the position: absolute but it breaks everything else on the pages.

Any clues?

[theyoker]

Have you got a live version of the website? because I can't quite work out what your going for.

Heres a good example of transparency/opacity.
http://www.w3schools.com/css/css_image_transparency.asp

[StaceyB]

No I don't. But I've attached an image that shows the layers I'm trying to achieve. Screen shot.jpgThe light middle bg layer is what's I'm trying to figure out. Thanks!

[StaceyB]

I GOT IT WORKING!! I had no idea you could have multiple background images. So I changed my css to the following:

body { background-image:url('front_layer_background_image.png'),url('back_layer_background_image.jpg');
background-position:center, center;
background-attachment: fixed;
background-repeat: repeat-y,repeat-x;
}

Not sure if I wrote this 100% correct but it looks good in all browsers so far.
My 'front_layer_background_image.png' is a transparency so I can see the 'back_layer_background_image.jpg' behind it!

Thanks!