Question

The following code ususally works well for me when I am using .gif or jpg images..

#contentBox1{ position:relative; width:980px; background:url(../images/bg-middle.png) repeat-y; min-height:80px;   }
#contentBox2{ position:relative; width:980px; background:url(../images/bg-top.png) no-repeat top; }
#contentBox3{ position:relative; width:980px; background:url(../images/bg-bottom.png) no-repeat bottom; min-height:500px; }

<div id="contentBox1"> <div id="contentBox2"> <div id="contentBox3">  Content Text Goes Here. </div> </div> </div>

But as you can see I use .png because everything needs transparency to see through to the background. So the “middle.png” background shows up behind the header and footer. I need all the room I can in this div at the top and bottom but can’t seem how to figure out the best css code to make this work.

Example

Answer 1

You could try this:

1. Combine the top + middle images into one image and make the middle section really long.
2. Place that as the background image of a div.
3. Inside the above div place a second div with the bottom image aligned to the bottom of this div as a background image. Make the bottom image not transparent but have it filled around the cloud by the yellow bg colour.