CODEWITHSUNDEEP
htmlcssinternet-explorer-8background-imagebackground-color
Spectre
Spectre

Reputation: 121

IE8 and earlier CSS background won't work even if I only have 1?

I'm not sure why it won't load my background color nor image if I'm not using multiple backgrounds on 1 element. ("IE8 and earlier do not support multiple background images on one element.")

#header1 {
  background: #191919 url(Site-in-development.png) left no-repeat;
  padding-top:15px;
  border-bottom: 1px solid white;}

Even when I remove the img and leave only the color it won't display. Any ideas?

http://www.nobodyfilm.org/overview-and-production.html (If you have IE9 press F12 and you can change it to IE8 and or 7.) Thanks!

Upvotes: 1

Views: 236

Answers (3)

andyb
andyb

Reputation: 43823

IE8 doesn't recognise the <header> element (or any of the other HTML5 elements). IE8 is simply not seeing the element, no matter how it is styled. You need to use something like html5shiv to make IE8 pretend to be a modern browser.

Including the html5shiv JavaScript file in a page can be achieved like so:

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

Also see http://blog.whatwg.org/supporting-new-elements-in-ie for a bit more background (no pun intended) on what the shiv does.

Upvotes: 4

Andrea Ligios
Andrea Ligios

Reputation: 50203

According to the documentation, it should be 

background: { 
   background-color 
   background-image 
   background-repeat
   background-attachment 
   background-position | inherit 
} ;

Try changing your code to:

background: #191919 url(Site-in-development.png) no-repeat scroll left;

In the linked documentation, under the Compatibility section, you can see the tons of buggy behaviors performed by IE from IE6 up to IE8 (and by Safari up to 2.0 too) related to the background property.

Upvotes: 0

Live
Live

Reputation: 79

Use 

#header1 {
background-image: url(Site-in-development.png);
background-color: #191919;
background-position:left;
background-repeat:no-repeat;
padding-top:15px;
border-bottom: 1px solid white;}

Upvotes: 0

Related Questions