CODEWITHSUNDEEP
htmlinternet-explorercross-browsercss
Kasparas Pochyla
Kasparas Pochyla

Reputation: 25

How to get <body> inset shadow to work in IE9?

I fallowed the instructions from one of answers here and got inset box-shadow to work on body tag.

Here is the live example: http://nemokamamuzika.lt

This is the code I fallowed:

html, body { 
    width:100%;
    height: 100%;
}

body {
    box-shadow: inset 0 0 1000px 30px black;
    background: url('http://osxdaily.com/wp-content/uploads/2011/08/apple-shirt.jpg');
}

But.... It's not working in the "loved" browser Internet Explorer 9...

Finnaly got a workaraound by myself. If somenone needs a solution:

This is the html:

<body>
<div id="shadow">
<div id="padding">
<div id="content">
</div></div></div></body>

This is CSS:

html { 
    height: 100%;
}

body {
  height:100%;
  min-height: 100%;
  background-image: url('/wp-content/uploads/someimage.jpg');
  background-attachment: scroll;
  background-repeat: repeat;
}

#shadow {
  width: 100%;
  min-height: 100%;
  margin: 0 auto;
  box-shadow: inset 0 0 400px 50px black;
}

#padding{
  width: 100%;
  min-height: 100%;
  margin: 0 auto;
  padding: 30px 0 30px 0;
}

Upvotes: 2

Views: 462

Answers (1)

sequelsite.dk
sequelsite.dk

Reputation: 21

Trick is to put the background image into the html tag.

This css3 sample will give you a nice faded background drop-down effect, otherwise often created using 24bit png images even in css3 browsers - however, this is easier. Testet in IE9, Firefox, Safari (for windows).

Test and try here: http://jsfiddle.net/LUDJF/

html {
        width:100%;
        height:100%;
        background:url('http://www.sequelsite.dk/mediafiles/sequelsite/white-grid-paper-background-pattern.jpg');
}

body {
        margin:0;
        padding:0;
        width:100%;
        height:100%;
        box-shadow  : inset 0px 3000px 200px -2800px rgba(255,0,0,0.5);
        -webkit-box-shadow: inset 0px 3000px 3000px -2800px rgba(255,0,0,0.5);
        -moz-box-shadow : inset 0px 3000px 200px -2800px rgba(255,0,0,0.5);
        -o-box-shadow   : inset 0px 3000px 200px -2800px rgba(255,0,0,0.5);
}

Upvotes: 2

Related Questions