Question

jsfiddle link: http://jsfiddle.net/djDWF/84/

The problem is, the inner container (text-padding) margin/width for the text/images is affecting the center background image. The repeated image that touches the footer does not extend to full height, and cuts off so the center and footer images do not match up (it is kind of hard to tell, but if you add or remove text in my jfiddle example you can see the center image change where it meets the footer.).

This is for a school project, and though I did not need to actually do this type of image background, I got this far so might as well continue. I don’t want to use javaScript if possible because that is not part of the course yet.

I tried removing the text wrapper and styling each p tag individually but the same effect occurs.

I also tried mathematical combinations using line-height and margins. If I set the line-height to equal the right and bottom margins, and the left margin to equal the height of the footer then the effect works, but because my footer image is so large this is not a workable solution.

Mathematically I tried to keep the same ratios with the footer height but this did not work either (or else I did this wrong. I tried dividing each by the same amount.)

Is there any way to do this using only CSS and and not having to resort to tables?

Answer 1

So in short the problem is: You can see a line showing up at the footer separation because the repeated centre background isn’t fully showing it’s last repeat as the container isn’t big enough.

The solution: If it doesn’t need to be variable and you know how much content you will be putting in you can just set a height: Live example – http://jsfiddle.net/djDWF/85.

div#background-center{
    background:url(http://i.imgur.com/gsNFa.png) repeat-y;
    float:left;
    width:700px;
    height: 1604px; /* add this */
}

Obviously, pick whatever height is right to fit your final text.

With your current images there is no way to do this automatically without using JavaScript.