background-position / background-repeat conflict

[johnallan]

I have a div to which the following CSS is applied.

.content{
margin: 210px auto 0px auto;
padding: 0px 257px 0px 257px;
width: 486px;
background-image: url(/_images/stage_02.jpg);
background-repeat: no-repeat;
background-position: 0px 370px;
height: 361px;
}

If I have background-repeat set to no-repeat the background-position is fine. But what I need is for the bg to repeat down (repeat-y) from the 370px position. As soons as I change to repeat-y the background-position is nullified. ( I guess it repeats both up and down ??) Any ideas aside from creating a huge background image so repeat isn't required.

 

[BillyRayPreachersSon]

Put another div inside your existing one with a 370px top margin on it, and then put the bg imnage on that inner element.

I've not tried it, but it might work.

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[ChrisHunt]

Alternatively, nest a second <div> inside the first like this:

<div class="content>
[red]<div class="inner">[/red]
Your content goes here
[red]</div>[/red]
</div>

You can style [tt].content[/tt] as you have done above, but with background-repeat set to repeat-y - you'll get a vertical stripe as you've already observed.

Now make an image 370px high and as wide as stage_02.jpg that's the same colour as the page background. Use that as a background image for [tt].inner[/tt] positioning it at the top left and set to no-repeat. That will overlay the first background image making it appear to start where you want it.

Does that make sense?

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd