Repeat image from set point?

HTML & CSS
1

How do you repeat-y an image starting from a certain point in the div?


#maininner {
width: 750px;
margin: 0px auto;
background: url(/images/rmgback.jpg) repeat-y center 426px;
min-height:1000px;
}

Here is the page I am talking about…

2

Perfect - thanks :slight_smile:

3

Hi,
As Kalon mentioned you will need to use a nested div to contain your content and then set a no-repeat image on it to mask over the reverse repeat of the parent’s BG image.

Here is an example I put together a while back that shows the behavior of repeat-y images. You will see the text continuing down into the repeating image area after it passes through the [URL=“http://www.css-lab.com/demos/multi-bg/images/top.jpg”]no-repeat image. The actual text is in the nested div though.

The repeating image actually turns around and paints back towards the top from the starting point. You will notice that I have a black line at the top of the repeating image. At the very top left of the page you will see that it is a partial paint showing that the image does indeed paint backwards from the starting point. It doesn’t start over again at the top as Ralph suggested.

4

Do you mean positioned horizontally or vertically? You have it centered at the moment, so the image will repeat down the center, which is fine. You can start the image repeating lower down by the 426px you’ve used, but once it’s reached the bottom it will start at the top again. So you can’t have any blank space above the bg image within the element it’s repeating in, if that’s what you mean. The y-repeated image will fill the whole column.

5

I think you are probably right - a nested div solution… thanks

6

Yeah - that is my problem… I want it to start as 426px down, then repeat… but it fills up the top of the div (the 426px) which I don’t want it to do.

I want it to start 426px down, then repeat vertically - but not in the 426px I have left.

If look at the styles in the example - then you will see a commented out verison which works correctly - but doesn’t repeat :frowning:

#maininner {
width: 750px;
margin: 0px auto;
background: url(images/rmgback.jpg) no-repeat center 426px;
min-height:1000px;
}
7

1 way I can think of off the top of my head is to have a separate div positioned where you need to in the parent container and then put the bg image in that separate div.