Question

I am trying to create a flexible div with a background as shown below, any suggestions on how i can do it in css?

Answer 1

For best cross-browser compatibility I would suggest to cut the box into three pieces:

Top and bottom pieces are not changing. The middle one should have 3px height and full width and be repeated to the y-axis.

<div id="shadowbox">
  <div class="content">Your Content here</div>
  <div id="boxending"><!-- --></div>
</div>

#shadowbox {
 background: url(box_top_bg.gif) 0 0 no-repeat;
}

#shadowbox.content {
  background: url(box_content_bg.gif) 0 0 repeat-y;
  margin-top: //as high, as the top picture is
}

#boxending {
  background: url(box_bottom_bg.gif) 0 0 no-repeat;
}

If your are not using a reset stylsheet you might have a problem with the empty div showing up the line-height. Have a look at this!