Repeating Footer Background Image Scrolling Issue

by Jonathan Longnecker

One of our astute readers discovered a flaw in our footer design implementations recently and I thought I’d share it with you. Turns out that we have a penchant for using a background image repeating on a 100% wide footer. Also turns out that when you squash your browser window down to anything smaller than the content and then scroll over to the right that background image stops repeating! See what I mean here:

footer problem

It’s not a huge deal, but if you have a site with a dark background and a lighter footer with dark text, this can quickly render that text unreadable. A quick check showed that pretty much any site I checked had this same problem, even Firefox.com! Well fortunately that astute reader (Timothy Phillips is his name) also provided a fix in his email to us. Just add a min-width value to the footer.

min-width: 960px;

Obviously your value would change depending on your site design. And sometimes your design might call for this treatment on the whole container or content area, so use wisely. If you want to fix it in IE6, I really don’t care smile. Use the !important hack or something.

I have to say Timothy is totally the man. Not only did he point out the problem, but went out of his way to provide the solution and let us post it here to let others know about it. I would link to his site, but he doesn’t have one up yet so here’s his email if you want to say thanks: atomtimmy@gmail.com.

May 14, 2009

Design, Tutorials

Comments

  1. That’s really funny because I noticed the same problem and has thinking about sending a similar fix to you guys. 

    I have 100% header & footer, for some reason this fix will only work on my layout if I apply 20px less than the overall max-width. Ex.

    masthead_wrap {min-width: 960px;}
    masthead {width: 940px;}

    If that makes sense? I’m surprised I’ve never read up on this issue before.  I have found this same problem on top agency sites. 

    Thanks for talking about it!

  2. Hahaha, love the IE6 bit!

  3. This was very helpful. It actually helped with another issue as well where a footer that stuck to the bottom shrunk. I set the min width to 1200px and it stopped shrinking. Thanks a lot!

Behold our Amazing Portfolio

Check it Out