How To Create A Box-shadow That Covers The Entire Page?

April 21, 2024 Post a Comment

the end result that I'm looking for is something like this: http://osxdaily.com/wp-content/uploads/2011/08/icloud-background.jpg Which was generated with this bkg title: http://osx

Solution 1:

Make sure whatever element you set the box shadow to has 100% width and height. This means that all ancestors must also have 100% height and width. So if you want to apply it to body, html must also have those properties.

CSS:

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

body {
    box-shadow: inset 00490px black;
    background: url('image.jpg');
}

JS Fiddle Example

To maintain the same shadow effect even when you scroll, apply the box shadow to a wrapper div and then apply overflow:auto.

HTML:

<html><body><divid="wrapper"></div></body></html>

CSS:

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

#wrapper {
    box-shadow: inset 00490px black;
    background: url('image.jpg');
    overflow: auto;
}

JS Fiddle Example

Solution 2:

If I understood correctly this is what your looking for: http://jsfiddle.net/RGWrC/

Here's the code:

html { 
    height: 100%;
}

body {
    min-height: 100%; 
    box-shadow: inset 00490px black;
    background: url('whatever.jpg');
}

This extends the background to the full height of the page, still, ensuring a minimum equal to the window's height. The CSS, I think, is self-explanatory.

Solution 3:

There is another pretty easy way to do similar effect. You have to wrap your website content with div that will have boxshadow. Also the div needs to have 100% width and height, and posiation: absolute; This will give You a nice effect evan when You scroll the page.

HTML

<divclass="shadow"><!-- ANY CONTENT GOES HERE --><div><h1>Content</h1></div><!-- ANY CONTENT GOES HERE --></div>

CSS

.shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-box-shadow: inset 0px0px400px#000000;
    box-shadow: inset 0px0px400px#000000;
}

Example: http://jsfiddle.net/2GRGF/1/

Solution 4:

I would set the image as the page background, then define a container with margins of about 100-200px (depending on how you want the shadow) and fill in this margin with a box-shadow on that div. You could also set the div to a fixed position (I believe) so that it will scroll with the page and maintain the same shadow effect

Edit: setting the image as the page (html or body) background will fix the problem of the image being too small, the div creates the shadow effect that you want

Solution 5:

What did you put the shadow on? You should put the inset shadow on the body, or an element that has 100% size.

The image in the link has the background square repeated and then an inset shadow, probably on the same element that spans across the entire screen

Html5 Lite