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; }

Share

• Share
• Delicious
• Tweet

Tags

1. css
2. ie
3. ie7

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 :-)