Why would my background image show up in Chrome but not in IE?

Question

I have a background image set to my main div. The background image shows up fine in Chrome but doesn't show at all in IE. Any ideas on what would cause this?

<div class="container" style="height:900px; margin-top:0px; background-image:url(Images/bg-stadiuminner.jpg); background-repeat:no-repeat;;"> 

Thanks

Answer 1

Is the relative url available for both browsers? Attempt to plug in the url for your image in IE and see if you can even load the image from the attempted url.

Answer 2

A few thoughts:

1. You should really opt for a stylesheet instead of embedding styles right into your div.
2. Your background may not be showing up because you never properly close your <div> with a </div>. Also you have an un-needed semicolon at the end of your style, but that probably wouldn't break anything.

Answer 3

.container {
    height:900px; 
    margin-top:0px;
    background:url(images/bg-stadiuminner.jpg) no-repeat;
}

<div class="container">

</div> 

This would be a better way - try using classes rather than inline styles where possible to make maintaining the code far easier.

you also had a double ;; which may very well confuse IE.

Answer 4

Don't you need quotes around that url?

style="background-image:url('paper.gif');"

Answer 5

The only thing that I can think of that could be causing this is that the JPEG file is in CMYK format rather than JPG. IE can't digest CMYK images.

I think a layout issue might be more probable, though. Are you 100% sure the DIV is stretching to where you expect it to stretch? What happens if you set a background colour?

Answer 6

As Pekka Commented up top. It was an issue with the jpeg its self. I was unable to open the jpeg in photoshop due to an incorrect marker. I took a screenshot of the image and pasted that in photoshop, cropping the correct dimensions, re-saving the file and now everything works. Thanks Pekka for the direction!

Answer 7

You are using inline style and also using the class 'container'. In the inline code there is no problem except there is ';;' at end of the line. We cannot see what is there in the container class. The problem might be there in the container class