No Partial Background Repeats

Preventing a repeating background from only partially repeating.

[oriridraco]

(I found Webmaster World recently, when looking for a bit of code for a site I was working on, and just keep coming back when I'd get stuck between a CSS rock and a HTML hard place. I'm really hoping you guys can help me out this time!)

Question:

Is there a way to take a repeating background image and force a full repeat of the image?

Or better yet, a way to set a div's height to a fluid multiple of an image's height so the image repeats completely?

Designed as a blog template, so the repeating part should ideally repeat until the end of the entry/content div, and force the div height an additional amount to ensure a full repeat of the background image.

I have no idea how to make this work in a CSS layout; I've not had to work with a background image that requires a full repeat to ensure the design still fits together.

Thank you all so much for your time and any help in advance - and thank you for all the great information here. You've all been a huge help, even if you didn't know it! (:

[edited by: DrDoc at 3:06 pm (utc) on June 23, 2007]
[edit reason] Removed URL. [/edit]

[vincevincevince]

I can do this if you have exactly one repeat extra below your content, but not where it should stop at exactly the right height. I'll give you that solution now, in case it helps:

Create 1x1px transparent GIF, call it space.gif, assuming the left-repeating bit is 100px wide and 400px height, and the template is 800px in total wide.

<div style="width:800px">
<div style="width:699px;padding-left:100px;float:right">MAIN CONTENT</div>
<img src="space.gif" style="float:left;width:1px;height:400px;">
<img src="space.gif" style="float:left;width:1px;height:400px;">
<img src="space.gif" style="float:left;width:1px;height:400px;">
<img src="space.gif" style="float:left;width:1px;height:400px;">
<img src="space.gif" style="float:left;width:1px;height:400px;">
</div>

Why should it work? The inner DIV has a space to the left of just 1px, the space.gif is 1px wide, so exactly one of them will float beside the inner DIV per row. All the rest make a single row down below the inner DIV. Total height = 400 * ((number which fit next to inner DIV) + 1)

[DrDoc]

Now, that's actually quite a nifty solution there, vince!

To top it off, give your outer div a margin-bottom of -400px, and it should be set. Just remember to also float the outer div, or place a clearing element at the bottom.

[Xapti]

nevermind

[edited by: Xapti at 5:04 pm (utc) on June 23, 2007]