repeat-x question?

[PicnicTutorials]

repeat-x question? I thought on this for awhile and it hasn't clicked yet - see an easy way? See image...

 

The #wrap is min-height 100%. The foot is under the #wrap in the html with a negative margin to suck it back up. The gray #foot background image is on the #foot. Like I did on the #head via a repeat-x background image on the body, I need a way to repeat-x a 5px sliver of the #foot image so at wider screen widths the #foot appears to continue to stretch to full width.

 

You can't put the repeat-x image on the body or html because they only go height 100% and no more. You can't put it on the wrapper because it's limited by a width. Maybe suck it out with negative values, but then you'll need to not create scrollbars. Am I missing something simple? Thanks!

Edited September 24, 2009 by Eric

[PicnicTutorials]

Of course, once I got up from the computer then two ways occurred to me. Still, if you see a better, or easier way, be sure to let me know.

 

One, wrap it all in another container, give it the min-height routine and width 100%. Then put the repeating graphic on it. Still, I don't like extra containers.

 

Two, make the footer graphic much larger (say 5000px), width 100%, and give it a 50% background position. In theory, both of those "should" work...

Edited September 24, 2009 by Eric

[falkencreative]

One, wrap it all in another container, give it the min-height routine and width 100%. Then put the repeating graphic on it. Still, I don't like extra containers.

 

That's the way I have done it in the past... One larger, width 100% div (I shouldn't need to set 100% width in the CSS though, since divs already default to 100%) )with a background repeat-x, and a centered div within that that contains a second image where I put my content.

[PicnicTutorials]

Thnaks Ben!

 

Look what I came up with. I think I prefer it. Another container, but I'm not messing with my main container this way.

 

#foot {

clear:both;

height:63px;

width:1000px;

background:url(../img/foot-bg.jpg) 0 0 no-repeat;

margin:-63px auto 0;

}

#bg {

height:63px;

margin:-63px 0 0;

background:url(../img/foot-repeat-bg.jpg) 0 0 repeat-x;

}

 

[PicnicTutorials]

Testing, I know it works, but I don't quite understand why it works. Looking at it, you would think that the #foot should be pulled up -126px to be even with the #bg? But that's not true!

 

Can you explain that to me? I think I understand what's happening, but still don't know why. Funny, I'm literaly sitting here putting my hands in the air and pretending they're the divs moving up. So once the #bg gets sucked up into the #wrap, it's no longer influenced by the movement of the #foot below it. So it stays put, as the #foot moves into the same space. Maybe colapsing margins? Hmmm?

Edited September 24, 2009 by Eric