Making an image span the vertical length of a page

[Catfish540]

I'm making my first website. It's almost done, but I'm struggling to do something that really feels like it should be easy.

I want to draw a tiled image on the left side of the page. I want it to start 150 pixels down from the top, be 180 pixels wide, and continue to the bottom of the page.

I am using a style sheet to define it. Here's how it looks at the moment:

div.x {
position:absolute;
left:0px;
width:180px;
height: 100%;
top:150px;
float: left;
z-index:1;
background-image: url(images/test_box.gif);
}

The z-index puts it behind some of the other containers on the screen. Anyway, I thought setting the height to 100% would make the image reach the bottom of the page, but it seems like it only makes it as long as the screen.

There is content on the right side of the webpage varies depending on what part of the site the viewer is looking at, and how much content there is determines how long the page is. I want this image "x" to always reach the bottom of the page, regardless of how much content there is. Is there a way I can do this?

[surrealillusions]

Not that easy really...

Only way i can think of based on what your saying, place the said image as a background for the area where the content is, then put this in the content div css

#content
{background-image: url(images/test_box.gif);
background-position:left;
background-repeat:repeat-y;}

Along with all the other values.

Then, depending on how wide the image, make the <p> tags have a padding-left:25px; for example in that div.

Without knowing your site (urls are not allowed) then thats all i can think of at the moment.

Hope that helps

:)

[Catfish540]

Thank you so much for your advice! It worked like a charm.