How to add a background Image using CSS that looks like a border down each side of a div

Answer 1

You should create a wide 1 pixel height bitmap covering the 2 drop shadows, and put it as the background of your most outer div (or you can put it in the body). Center it and set the background-repeat to repeat-y.

This technique is used on this site for example. It uses this css:

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

Answer 2

Create a PNG as wide as your wrap div and set it as the background to the wrap:

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>

You'll probably want some margins or padding on the inner divs so that that the content doesn't cover your drop shadows.

Answer 3

The basic technique is called 'faux columns', and is explained in the article with the same name. The article covers how to use to "cover up" for floating sidebars, but it's the same basic principle to what you want to achieve.