Blah8 Posted January 23, 2012 Share Posted January 23, 2012 Hi, I'm relatively new to CSS, and have been trying to learn to use some of the newer CSS3 features recently. I've been trying to get an effect looking similar to lens vignetting around the edges of a web page and decided to try using the "box-shadow: inset [etc...]" property to do so.However, for some reason when I apply this to my "body" in CSS, the effect does not extend to the bottom of the page. Instead, it seems to be constrained to the extent of the padding around the body element. The only reason I thought it would make sense to add the box-shadow to the body in the first place was because I assumed the body applied to the whole page (I reasoned that if the background-image tiles an image infinitely, regardless of how long the page becomes, the same would apply to the box-shadow property). Obviously, putting the box-shadow on the body was the wrong decision; I'm just wondering how best to get an inset box-shadow to consitently cover all four edges of the frame of the web page and stick/scale with the page to fit different window sizes. The existing method I used does all of that except extend to the bottom edge of the page. Here's the body div in question: body {background-image:url('bg-pattern.png');padding: 4em;margin: auto;font-family: Arial, Helvetica, sans-serif;font-size:100%;color: rgb(215,215,215);box-shadow: inset 0px 0px 250px 0px black;-webkit-box-shadow: inset 0px 0px 250px 0px black;-moz-box-shadow: inset 0px 0px 250px 0px black;background-color: #333333;height: 100%;} And I've attached an image of the problem as well. Link to comment Share on other sites More sharing options...
Ingolme Posted January 24, 2012 Share Posted January 24, 2012 Give the <html> element a height of 100% as well. The body may be inheriting from it. Link to comment Share on other sites More sharing options...
Blah8 Posted January 25, 2012 Author Share Posted January 25, 2012 Ah, thank you kindly - it worked quite well!Interestingly, the body's padding combined with the 100% height caused there to be a constant 4em of extra space at the bottom edge of the page (based from the original window size). When I removed the padding though, it worked just fine. Thanks again! Link to comment Share on other sites More sharing options...
ShadowMage Posted January 25, 2012 Share Posted January 25, 2012 Interestingly, the body's padding combined with the 100% height caused there to be a constant 4em of extra space at the bottom edge of the page (based from the original window size).That is the intended behavior. Height and width are meant to define the size of the content area of an element. Have a look at the box model. It is essential that you understand the box model if you ever plan to be good with CSS. FWIW, the new CSS 3 box-sizing property allows you to modify what height and width are including. For example, if you set box-sizing to border-box, then the height and width will include everything to the outside of the border, including the content, padding, and the border itself. Link to comment Share on other sites More sharing options...
Blah8 Posted January 26, 2012 Author Share Posted January 26, 2012 Ah, cool - that helped a lot!I was pretty familiar with the box model structure-wise, but I guess I was under the false impression that the width/height properties extended past the Padding and stopped at the Border. Using that box-sizing property helped me to not have to use positioning/directions to get the main content box where I wanted it. Link to comment Share on other sites More sharing options...
ShadowMage Posted January 26, 2012 Share Posted January 26, 2012 Keep in mind though, that box-sizing is CSS 3 so older browsers will not support it, namely IE 8 and below. I think most of the other major browsers supported it fairly early on. IE was (as always) the late adopter. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.