Question

I’m trying to add an inner 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?

Answer 1

The problem is that the body element doesn’t fill the window.

Add this to your CSS:

html, body { height: 100%; }