Help my Footer

OK, I see a couple of problems. The first is that the #footer-container has a set height of 275px, which matches the height of the background image.

The background image is also set to repeat-x (horizontally).

But the other problem you have is that the actual background image for the footer has a white line on the top on it, which means that even if you set repeat-x to just repeat, you’ll get the white line on top repeating too. This is the image.

I figure you’ve got a couple of options, the least of which is to open the background image in an image editor and make it taller. You’d then need to adjust the height set on #footer-container to match accordingly.

A more flexible way to go about it would be:

1. Remove the white line from the background image via an image editor and set the background in #footer-container to repeat (from repeat-x).
2. Next, you’d adjust the height of #footer-container to fit the footer widgets AND your copyright div.
3. Last, if you liked the white line, you could fake it using a border-top on #footer-container, something like border-top: 5px solid #fff;.
   In essence, changing:

   #footer-container {
     background: url("images/footer_repeat.png") repeat-x scroll center center transparent;
     height: 275px;
     margin: 0;
   }

   to something like this:

   #footer-container {
     background: url("images/footer_repeat.png") repeat scroll center center transparent;
     height: 325px;
     border-top: 5px solid #fff;
     margin: 0;
   }

Hope that helps.

You can just change the background image url in #footer-container and change the repeat behavior in that same line. From looking at the image in Photoshop, it looks like there’s also a minute shadow and some transparency on the top, something I don’t think you’d want to lose. Best suggestion at this point:

• Just to open it in Photoshop, extend the Canvas down to fit whatever height you’re looking for and clone some of the texture into the extra bottom space.
• Then either overwrite the original background image, or save it with a new name and alter #footer-container‘s background and height properties accordingly.

You could set a min-height instead of height so that it flexes but wouldn’t get smaller than you wanted it to.

The extra background that’s loading above the white line is because the background image for #footerSpan has some transparent space at the top.

This whole thing is just kind of getting out of hand.

Why not restore the footer as it was, then run a full-width span underneath it (with the tiled texture background) with the copyright div in it? Maybe set a margin-bottom on the copyright div.