CODEWITHSUNDEEP
htmlcssinternet-explorer
JBL
JBL

Reputation: 247

CSS Background Image Not Showing in IE

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;

}

Upvotes: 3

Views: 21141

Answers (2)

Anson
Anson

Reputation: 2674

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.

Upvotes: 2

Laszlo the Wiz
Laszlo the Wiz

Reputation: 574

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.

Upvotes: 7

Related Questions