CSS background Q...

[growse]

Does anyone know how to make a CSS background go in only one direction from a specified starting point when a repeat direction is specified?

I've got a div, which I want to have a 2px left border applied, but starting only at 100px down from the top of the div. I don't think you can do this with a border, so I had the idea of using a small 2x1px image and doing a repeat-y. However, when I tell it to put the background at the top and 100px down, it repeats the background in both directions (up and down) giving the same effect as a border.

Any ideas?

 

[Tripnologist]

If you're dealing with something so small, I'd just make up a large .gif. Have the first 100px transparent and then make it a bit longer than you think it would ever need to be. As it would only be one color, the file size would be very very small.

 

[Dj_Jestar]

er.. what?

I think you want something like:

background-image: url(/blah.gif);
background-repeat: repeat-x;
background-position: 0% 100px;

 

[growse]

er.. what?

I think you want something like:

background-image: url(/blah.gif);
background-repeat: repeat-x;
background-position: 0% 100px;

Yes, except I need repeat-y, and I need that repeat to only repeat downwards (as opposed to both upwards and downwards) from it's starting y offset of 100px.

Tripnologist: unfortunately, a single image can't be done as the page could be infinately long.