CSS Background Image Not Showing in IE

Question

Please help,

The background image is not showing in IE, but everything is perfectly fine in safari.

I have checked with W3C CSS validation and html validation, everything is ok.

What is the problem?

http://www.applezone.com.hk/newrx/

body
{ 
/*background-color:#eee;*/
font-family:Arial, Helvetica, sans-serif;
margin: 0px 0px 0px 0px;
background:url(images/bg_line.JPG);
background-repeat:repeat-x;
}

p
{
    font-size:12px;
    color:#999999;
    line-height:160%;
}

#container
{
    width:1050px;
    background:url(images/bg.JPG) no-repeat;

    margin-top:0px;
    margin-left: auto;
    margin-right: auto;
    padding-left:150px;
    padding-top:220px;

}

Answer 1

There's something wrong with the jpg files. IE8 is not able to render them. Maybe you are using a JPEG2000 format?

If you try to load "http://www.applezone.com.hk/newrx/images/bg.JPG" in IE8 you will get a broken picture icon only. I downloaded the file and opened it from the hard drive too, got the same result.

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

I tried in PhotoFiltre and re-saved it using a 90% quality setting. The size went down dramatically (to about 8% of the original without visible loss of quality) and IE8 is able to open it now!

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

Answer 2

It'd be help to know what version of IE you're using. Your code works fine for me in IE7. Anyway...

background:url(images/bg_line.JPG);

Try this instead:

background-image:url('images/bg_line.JPG');

You're using the background shorthand which is valid according to the standard, but it's possible whatever version of IE you're using doesn't support the way you're using it. IE may also expect the filename to be quoted, as I did for you.