Adding an "inner glow" to a page with CSS
I'm trying to add an i开发者_开发百科nner glow to a whole page using CSS.
CSS:
body {
margin: 0;
padding: 0;
border: 0;
width: 100%;
height: 100%;
-moz-box-shadow:inset 0 0 10px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
box-shadow:inset 0 0 10px #000000;
background-image: url('/images/bg.png');
}
That half-works. The inner glow is there but it doesn't stretch to the whole height of the page.
http://snapplr.com/g65v.png
Is there an easy way to do this?
The problem is that the body
element doesn't fill the window.
Add this to your CSS:
html, body { height: 100%; }
Try switching the body
to html
, e.g. :
html {
margin: 0;
padding: 0;
border: 0;
width: 100%;
height: 100%;
-moz-box-shadow:inset 0 0 10px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
box-shadow:inset 0 0 10px #000000;
background-image: url('/images/bg.png');
}
Link : http://jsfiddle.net/LUREm/
精彩评论