Repeating Footer Background Image Scrolling Issue
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:
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 
. 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: (JavaScript must be enabled to view this email address).
Share This Entry with Your Favorite Social Networking Sites.Hahaha, love the IE6 bit!
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!
Live Preview
Blog
Categories
Recent Articles
- Five Days of DesignHope
- Visual Recipes Design Process
- Use ImageSizer to Scale Lightbox Gallery Images in ExpressionEngine
- Three Years and Thank You’s
- DesignersMusic.com: Find & Share Great Music with Other Designers
- archives
Popular Articles
BestChristianDesign is helping give churches inspiration for their next project. Good call, guys.
Seth Godin reminds us to enjoy and take advantage of the uphills.
Stop announcing your new project. Just do it.
Rock and Roll people, Rock and Roll.
To all you staff designers out there, here’s a link for you. (via @ryanlascano)
Fascinating look into the music business.
Derek Sivers posts some great advice about balancing your life.
Apryl Lynn
With This Breath
@brandaiddesign I thought about something like this during Football season here in TN. It's like a religion here.
@wessiegrist If you can copy and paste words with foreign characters like über and cañon using the font you want, it *should* support it.
ExpressionEngine
The best Content Management System for designers. Feature rich, completely customizable, and easily extendable.
Basecamp
Basecamp is the smarter, easier, more elegant way to collaborate on your internal and client projects.
(JavaScript must be enabled to view this email address)
May 15, 2009
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!