Как добавить фоновое изображение с помощью CSS, который выглядит как граница по обе стороны от div

Question

По сути, я хочу создать собственную рамку вниз по левой и правой стороне моего содержимого div. Мне удалось создать то, что наполовину работает. Проблема в том, что я получаю выравнивание элементов div так, чтобы они совпадали с div содержимого и выглядели как границы, а не как плавающие линии Это сложно объяснить, поэтому, пожалуйста, смотрите изображение атаки того, что я хочу.

Приветствия

Надеюсь, я кое-что понял.

альтернативный текст http://www.webquark.co.uk/shadowed-borders.jpg

Answer 1

Базовая техника называется «искусственные столбцы» и объясняется в статье с тем же именем . В статье рассказывается, как использовать «прикрытие» для плавающих боковых панелей, но это тот же базовый принцип, которого вы хотите достичь.

Answer 2

Создайте PNG такой же ширины, как ваш div для переноса, и установите его в качестве фона для переноса:

CSS:

div#wrap {
    background: url('drop-shadow.png') repeat-y;
    width: // the width of #wrap should be the same as the width of the background image
}

HTML:

<div id="wrap">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

Возможно, вам понадобятся поля или отступы для внутренних элементов, чтобы содержимое не покрывало ваши тени.

Answer 3

Вы должны создать широкое растровое изображение высотой 1 пиксель, охватывающее 2 тени, и поместить его в качестве фона вашего самого внешнего элемента (или вы можете поместить его в тело). Отцентрируйте его и установите background-repeat на repeat-y.

Этот метод используется, например, на этом сайте . Он использует этот CSS:

body { 
  background-attachment: scroll;
  background-repeat: repeat-y;
  background-position: 50% 0px;
  background-color: #e8b36d;
  background-image: url("images/bg_center_orange.gif");
}