Help my Footer

EDIT: I see what you mean. I’ll post back.

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.

What do you think about using the texture? I have that as an image as well with no white line. Just don’t know where to stick it so that it doesn’t end up laying on top of the footer image.

Thanks for the help

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.

Thanks. I’ll try that. My only issue is I was hoping to not have a set height for the footer, rather have it adjust with the content but I guess that’s not so easy when you’re using images.

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

I moved some things around. If you don’t mind taking another look, I think I am close. The #footerWidget has the repeating background texture but I can’t get figure out the right way to position it so that it starts level with #footerSpan

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.

Tell me about it. It’s 3am and I’m still staring at this computer! I think I did what you’re suggesting and it seems to be working except the span on the bottom is cutting into the footer image now.

Never mind. I just set a min-height on the footer and fixed that. Thanks a lot for your help!