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

Question

Basicly I want to create a custom border, down the left and right side of my content div. I have managed to create something that half works. The problem I am getting it aligning the divs so that are flush to the content div and look like borders rather than floating lines. It is hard to explain so please see the attack image of what I want.

Cheers

Hopefully I have made some sence.

alt text http://www.webquark.co.uk/shadowed-borders.jpg

Answer 1

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.

Answer 2

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 3

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.