user3837882 user3837882 - 1 month ago 10
CSS Question

Why is my background image not showing in IE but working fine in every other browser?

IE Version: Latest

CSS & HTML:



#mainbackground {
background-image: url(../images/mainbackground.jpg);
width:300px;
height: 250px;
}

<div id="mainbackground"></div>





Things I have tried and that have failed:


  1. Having no spaces between declarations.

  2. Adding quotes, single & double ticks.

  3. Changing height or width to 100%.

  4. Checked case sensitivity. Everything is lowercase.

  5. Checked visibility & opacity.



Other information:
Works perfect in Firefox, Chrome & Safari.
Animation switches to another background after this one with the exact CSS, just a different ID name and it works fine.

Let me know if you need anything, thanks!

Answer

First try this:

background-image: url('../images/mainbackground.jpg');

If It's not works... then there's something wrong with the jpg files, probably. IE8 is not able to render them. Maybe you are using a JPEG2000 format?

Try loading the pictures in an editor, like GIMP or PhotoFiltre and re-saving them (using save as).

You should try to make image files as small as possible on the site because that largely affects the visitors experience.

Comments