CODEWITHSUNDEEP
internet-explorer-8backgroundcss
Renari
Renari

Reputation: 892

Layered Backgrounds in IE8

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.

Upvotes: 2

Views: 1317

Answers (1)

Donut
Donut

Reputation: 112825

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.

Upvotes: 5

Related Questions