I have been trying to solve this problem for the past couple of days and I am trying to figure out what I have going wrong. I am creating a theme for my website and I am trying to create a rounded box look. I have created the images and I can get the box displayed correct if it is fixed but I want the rounded box to be able to expand and contract due to page length. The site I am using it on will have blogs and items of that nature that can turn into multiple pages. A good example of what I am looking at is www.mollom.com. If you look at their main content area you will see a double boxed look and that is what I am trying to do through CSS. I have set it up like (not exact typing from memory as I do not currently have access to the machine it is on). //css back .top{ background-image: url(top.png), top center, width:1021px no-repeat; } back .mid { background-image: url(mid.png), 0 center, width:1021px repeat; } back .bottom { background-image: url(bottom.png), bottom center, width:1021px no-repeat; } //css Then obviously on the page I have <div class="back"> <div class="top"></div> <div class="mid">***content***</div> <div class="bottom"></div> </div> I have been toying with this for awhile. Please give me some insight.
here i´ve used what you wanna use http://tahtibingo.com/ you could use this css, of course you have to change things to suit your purpose. #whatevertop { position:relative; left: 15px; background: url(yourimagefolder/yourimage.jpg) no-repeat; float: left; margin:0 ; width: 231px; height: 39px; } #whateverbg { position:relative; left: 15px; background: url(yourimagefolder/yourimage.jpg) repeat-y; float: left; margin:0 ; width: 231px; } #whateverbottom { position:relative; left: 15px; background: url(yourimagefolder/yourimage.jpg) no-repeat; float: left; margin: 0 ; width: 231px; height: 3px; } Code (markup): and the html: <div id="whatevertop"> </div> <div id="whateverbg"> <p> blaa blaa </p> </div> <div id="lefttopbottom"> </div> HTML: