CODEWITHSUNDEEP
css
nickfrancis.me
nickfrancis.me

Reputation: 271

How do i make a flexible div with a background in css

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

enter image description here

Upvotes: 0

Views: 378

Answers (1)

Jannis M
Jannis M

Reputation: 745

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

enter image description here

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!

Upvotes: 1

Related Questions