TroyGrosfield.com TroyGrosfield.com

Headline

IE7 Background Image Hidden or Disappearing Fix

Author
by Troy Grosfield
Date
October 7th, 2010
Category
Developer
Story

Have you ever set a background image that showed up inconsistently cut off at times when you view your page in IE? The fix is quite simple. Here’s an example. You want to list to look like this:

But when we try and view it in IE we sometimes see this:

If you ever encounter this try setting the overflow: auto on the element that has the background image.

HTML

<ul>
	<li>First list item</li>
	<li>Second list item</li>
	<li>Third list item</li>
</ul>

CSS

ul { list-style: none outside none;}
ul li { background: url('some-background-image.jpg') no-repeat scroll 0 0; padding-left: 25px;}

IE7 Specific CSS

ul li { overflow: auto; }
Tags
Comments
4 Comments »

4 Comments

Leave a reply

 
  1. Author
    Debbie
    Date
    May 1st, 2012 at 4:14 pm
    Comment

    Great tip, thank you!

  2. Author
    Nicolas
    Date
    January 8th, 2012 at 9:07 am
    Comment

    Fantastic! Worked for hours to solve this then googled “ie7 background image partially hidden” and your code fixed it!

  3. Author
    Dennis
    Date
    November 8th, 2011 at 3:39 am
    Comment

    Thank you! Thanks to your post I found a solution within minutes of discovering the problem. Do you by chance know what causes this behaviour? And why this solution works?

  4. Author
    J
    Date
    February 17th, 2011 at 5:52 pm
    Comment

    Great post, thanks for this. I wish I found it earlier. I was having my problem in IE7. The background image was being cut off and this solved it….blessings :-)