Forum Moderators: not2easy
I am using a repeating (-y) background image to create a border on each side of my page. The pattern is complex and I need it to line up with the footer to create a nice look. Here is what it's supposed to look like:
<snip>
But instead the footer doesn't line up because it does not place itself at the bottom of a background repeat...
<snip>
The relevant code is:
div#container {
background: #000000 url(img/background_decor.gif) repeat-y top center;
width: 760px;
margin: 0 auto;
text-align: center; }
div#footer {
clear: both;
background: url(img/footer_decor.gif) no-repeat top center;
padding: 0;
height: 80px;
width: 760px;
}
Hope I've done a good enough job of explaining the problem, thanks very much for your help!
[edited by: swa66 at 9:52 pm (utc) on Nov. 10, 2008]
[edit reason] No personal URLs, please see forum charter [/edit]
Since URLs aren't allowed, I'll try to describe what was there:
To get that working you need to make sure the height of #container would end up to be a multiple of the height of your background image. I'm afraid that is beyond what CSS will do for you as is. I think you need scripting to get that working. (Try javascript)
