CSS to add extra background to column?

Hello

I have a site with variable length pages and a side column with some content that is generic to all pages.

I'd like the background colour of the column to stretch all the way to the bottom of the page and have tried using the following code in my main css file in order to add some extra background:

body {
background: url(images/menu_back.gif) 95px 120px repeat-y;
}

(manu_back.gif is a 150px x 1px solid colour image)

A column now appears 95px away from the left side, but runs from the top of the screen to the bottom, instead of starting 120px down.

Could anyone tell me what I'm doing wrong?

repeat-y is more powerful than positioning. Afterall, you are telling it to repeat for the whole y axis. You find a similar problem if you said repeat-x.

body {
background: url(images/menu_back.gif) 95px 120px repeat-y;
}

Have you considered setting the background of your menu column to menu_back.gif instead of setting it for your whole body?

Thanks for the idea, RaptorRex. I've just tried putting

background: url(images/menu_back.gif) 0px 0px repeat-y;

into the menu colum style class and unfortunately it gives the same result as just using a background colour.

Any other ideas?

Do you have a link we can see? Or can you post some code, so we can troubleshoot and test ?

Thanks for the offer, DSMag.

These are just the bits that I think are relevant. Please tell me if more would help.

First attempt:

From stylesheet

Code: Select all

body {
	background-color:#FFFFFF;
	background: url(images/menu_back.gif) 95px 120px repeat-y;
}

Second attempt:

From stylesheet

Code: Select all

#menu {
	position:absolute;
	width:190px;
	float:top;
	height:475px;
	z-index:2;
	top: 100px;
	background-color:#C0C0C0;
	left: 0px;
	background: url(images/menu_back.gif) 0px 0px repeat-y;	
}

body {
	background-color:#FFFFFF;	
}