Basically my goal is for my page content div to be encapsulated in a round rectangle. Sort of like this:
Top of round rect (White)
Page content (uses a white rectangular css background)
Bottom of round rect(White)
So then the page content section can be as long as I need and retain the round rect shape. I'm just not sure the best way to do this. I tried adding an img to the top of pagecontent div, but the transparent areas were overridden by the pagecontent's background. Thanks
The famous Sliding Doors technique may be what you need. You may need to add an additional repeating image to make it infinitely long.
If I understand what you mean you should put the top and bottom divs outside of the content div :
<html>
<div id=top> </div>
<div id=middle>
... insert page content ...
</div>
<div id=bottom> </div>
</html>
and then in the css
#top {
background : url("top.png") no-repeat bottom center;
height : <height of image in pixels>px;
padding : 0;
margin: 10px auto 0 auto;
width:<required width>
}
#middle {
background : url("middle.png") repeat-y top center;
padding : 0;
margin: 0 auto 0 auto;
width:<required width>
}
#bottom {
background : url("bottom.png") no-repeat top center;
height : <height of image in pixels>px;
padding : 0;
margin: 0 auto 10px auto;
width:<required width>
}