How to make my background images work in IE8?

[Mitra]

Hello! As you can see my background images work fine in FF and in Chrome and even in IE9..or so I am told, but I can’t get them to work in IE8…any suggestions?

http://www.the-pc-pitstop.com
my current css for this to work is:

#content {

background-image: url('http://the-pc-pitstop.com/wp-content/uploads/2011/08/top-frame720.png'), url('http://the-pc-pitstop.com/wp-content/uploads/2011/08/footer-frame720.png');

background-repeat: no-repeat, no-repeat;

background-attachment: scroll, scroll;

background-position: top, bottom;

background-clip: border-box, border-box;

background-origin: padding-box, padding-box;

background-size: auto auto, auto auto;

padding-top: 100px;

padding-left: 10px;

padding-bottom: 20px;

padding-right: 5px;

}

Your assistance is greatly appreciated!

[joshuanhibbert]

@chriscoyier Have you though about removing white-space: nowrap; from the code element so that this doesn’t happen?

[TheDoc]

Or people could use the pre tags ;)

Have a look at this: http://76.74.170.157/post_Cross_Browser_Multi_background_images__including_I-16839.html

You’ll need to do some extra work to get multi-backgrounds working in IE.

Maybe the Shiv will help with this, I’m not sure.

[joshuanhibbert]

@TheDoc Just because that is the right way to do it doesn’t mean people will. Removing nowrap limits the ‘breaking’ in these cases.

[mcguiver178]

Well there could be two reasons, either the multiple background issue, or the .png try to use jpgs, altho I´m not completely sure if IE8 can or not read pngs, but I knoe IE has something against them.

[Rob MacKay]

http://www.modernizr.com/ might help – it comes with http://html5boilerplate.com/

[Mitra]

Thanks everyone. I will try some of these solutions and update once I find the one that works best! So

[Author]

Posts