Repeating background image

Hi everyone,

I have the following css code where I’m trying to insert a background image into a wrapper div to create a faux column effect:

#content-wrapper {
	position: relative;
	margin: 0 auto;
	width: 960px;
	text-align: left;
	overflow: hidden;
	background: url(../img/content-wrapper-bg.gif) repeat-y left 478px;
}	

I need the image to start repeating on the y axis at the 478 pixel mark downwards. When I tried the above code though, the image just repeats from the top left.

Does anyone know what I’m doing wrong?

Appreciate any help.

The problem is that CSS does technicalliy start 478 pixels over, but then it repeats throughout the entire dimensions and in real effect, setting it over does nothing.

Perhaps adding whitespace to the image would help :).

I need the image to start repeating on the y axis at the 478 pixel mark downwards. When I tried the above code though, the image just repeats from the top left.
Hi,
It is starting at 478px down, but what is probably confusing you is that it turns around and paints backwards to the top.

That is what happens when you use background repeat and position together.

Using background-position: with repeat-y

You can nest another div in that div and use a blank no-repeat image to hide the reverse repeat of your current image, as shown in that link above.

If you look at the top left corner in that example you will see that it is not a complete height of the repeating image. If it started at the top you would see the complete 37px height between the black lines.

Thanks for the replies,

I tried using a nested div but the repeating background (which I made white) is covering up an image that’s being repeated in the body tag so doesn’t look like it’s going to work.

I don’t think there’s going to be any workable solution to this problem. :frowning:

I don’t think there’s going to be any workable solution to this problem. :frowning:
Hi, we would need to see the complete code you are using before saying it is impossible.
All we have from you at this point is a snippet of css, that’s not enough to see what you are doing.

the key is to put the y-repeating bg on the parent DIV, then the “white” on the child, with no-repeat or repeat-x on the child div. hope that helps.