images as borders

[fuzzee]

Is there a way to put 2 images as the right and left borders of a website?

I am working on my website, and I was wondering if it was possible to use images as borders, or do I need to put two separate divs with images n them along the sides?

[Pádraig]

You could try float: left; and float: right;

[masonbarge]

You can do a lot with images as borders -- in fact, pretty much whatever you want to do -- but I have always found it useful to have the image in a separate div for control and standardization. Like, if you want to have a repeating background, you can put a tiny .gif or .png file as the background of a div.

Here's the only place I've done an extensive image border: The top of the box is an image with a transparent corner at the top left to let the background show through, and the drop shadow at the right and bottom are divs with images.

Like, the right drop shadow is done by using a background image for the div one pixel high that goes across the white box and then has the drop shadow. The box itself is actually a container div that includes all the drop shadows and some of the blue grid background:

http://www.dhreport.com/interactive_health/index.php

Code: Select all

.box_auto,.box_auto_text,.box_auto_white, .box_auto_text_white {
width:509px;
height:auto;
font:14px/16px Verdana,Helvetica,Trebuchet,sans-serif;
color:#0d2727;
margin:0;
padding:0;
}
.box_auto_white, .box_auto_text_white { background:
 url(./../images/box_bg_test.gif) top left repeat; }

[masonbarge]

Maybe I'd better explain a little better. There are at least three different ways to do left-right borders.

First, if it's a simple shadow or border, you can use an image, 1 px high and the width of the div, as the background of a div. Then you just use margins to keep the stuff inside the div from overlapping the image.

Second, you can have a container div, say you have "div.box { width: 500px;}". Then you can put three columns inside it: the left border div, with a width equal to the width of the left border image, floated left; the center column where the content goes, also floated left; and the right border div, as wide as the right border image, floated right. I'd suggest you don't set any left-right margins for the three interior columns. Then put your images in the two border divs and you're cooking.

Third, if you want something really fancy, just make one huge graphic the width of your div and set it as the background. This really doesn't need to be too terribly large, since the compression formats will make the single color in the center very cheap. This is the worst option (and really pretty noobish) due to the size of the file that will need to load, but the easiest from a css point of view.

[moojoo]

Perhaps the simplest way would be to have two containing divs one with the background positioned left other right.

[fuzzee]

Ok, thanks for the help. I'll see what I can do, and post the results when it is done!