Как мне сделать гибкий div с фоном в CSS

Question

Я пытаюсь создать гибкий div с фоном, как показано ниже, любые предложения о том, как я могу сделать это в css?

Answer 1

Для лучшей кросс-браузерной совместимости я бы предложил разрезать коробку на три части:

Верхняя и нижняя части не меняются. Средний должен иметь высоту 3 пикселя и полную ширину и повторяться по оси Y.

<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;
}

Если вы не используете таблицу стилей сброса, у вас может быть проблема с пустым div, показывающим высоту строки. Посмотрите на это!