2
background-image: url('/images/tenticles.png'), url('/images/header.png');

I have the above code, which works in both Firefox and Chrome. However it does not work in IE8. I was wondering if there was a way around this not working. Something similar to HTML5shiv.

Renari
  • 822
  • 7
  • 16
  • 32

1 Answers1

5

There are multiple workarounds for IE's lack of multiple background support. One such technique involves simply creating a div that spans the entire page, and setting its background along with the background of the body element. This technique can be repeated as necessary. For example:

body { background-url('/images/tenticles.png'); }
#background1 { background-url('/images/header.png'); }

<body>
    <div id="background1">
    </div>
</body>

However, it looks like you want something along the lines of CSS3 PIE (Progressive Internet Explorer), which "makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features". From PIE's website:

PIE currently has full or partial support for the following CSS3 features:

  • border-radius
  • box-shadow
  • border-image
  • multiple background images
  • linear-gradient as background image

Other features are under active development.

Note that this question is very similar and has a lot of other useful information and techniques.

Community
  • 1
  • 1
Donut
  • 110,061
  • 20
  • 134
  • 146
  • Thanks, I found PIE while looking for a solution but it didn't seem to work when I tested it. I'll mess around with it a little longer to see if I did something wrong. – Renari Feb 17 '11 at 23:17
  • @Arimil Gotcha; if you're still having problems with it I can think of a good place to ask for help... – Donut Feb 18 '11 at 00:42