Repeat CSS background vertically: center, right and left

[Ryusuke]

This is my websiteI was wondering how I can have this imageAs a border on both the left and right sides on the main content and avoid any chance of overlappingThanks W3!

[Little Goat]

is the content a fixed width? if it is, make yourself an image that is one pixel tall, and as wide as it needs to be by cutting of the top 1px of that image, copying it, and putting it at either side of the image. then fill the middle with a different color.ex: -----------------------------------------------------------set it as the background, and it will repeat downwards (and sideways too if it's not wide enough).

[iammatto]

If you are working with a more liquid layout, you can use the following css / html

CSS:<style type="text/css">#left {	background: url(bluebaronside.gif) repeat-y top left;	padding-left: 28px;	margin-left: 50px;}#right {	background: url(bluebaronside.gif) repeat-y top right;	padding-right: 28px;	margin-right: 50px;}HTML:<div id="left"><div id="right">  Your content / center column html will go here.</div></div>

The 28px came from the width of the image you provided, but if you want a bit more padding inside the border you can make that bigger, and the 50px is just so you can have a bit of space on the outside of the borders. If you want it to go all the way to the outside just get rid of the margins, and if you want more, just increase them. I have tested this in Opera, Firefox and IE6, and it works great.

[Ryusuke]

0_0 I Don't Understand ^^ Fixed width? I guess so^ And for that am I supposed to use both HTML and CSS?Because the CSS itself doesn't work!

[Err]

Fixed width is when you are using px (pixels) or other percise sizes for your document. % (Percentages) are usually not fixed because they can grow with your browser (The more bigger you make your browser window the more bigger/wider your content will get automatically). Learn more here: http://www.w3schools.com/css/pr_dim_width.aspYes, he also wanted you to use the HTML.

[Ryusuke]

Okay, coolBut what if I want to have a main background that is under everything.LIke this one http://img110.imageshack.us/img110/234/untitled4sl0.jpg

[reportingsjr]

body {background-image: url(blah.png);}

That will repeat it going down and across.

[Ryusuke]

^But then I won't see the fancy bar on the left