box-shadow inset on <html> works just in the viewable part of the website

krohn7master

New Member
I use \[code\]box-shadow\[/code\] on the \[code\]html\[/code\] element to give the background of a website a light vignette effect. But if the content of the site is longer than the window the \[code\]box-shadow\[/code\] will only display in the part of the site which is viewable at the first glance. If you scroll down, the \[code\]box-shadow\[/code\] stops working.Here is my CSS code:\[code\]html { box-shadow: 0 0 200px rgba(0,0,0,0.9) inset; height: 100%;}body { font-family: "Source Sans Pro", sans-serif; margin: 0; background: url('../img/subtle_grunge.png');}\[/code\]I tried to apply the \[code\]box-shadow\[/code\] to the \[code\]body\[/code\] element, but that won't work either. Surprisingly the background-image set for the \[code\]body\[/code\] works just fine. The problem appears in all browsers (Safari 6, Firefox 18, Chrome 24
 
Back
Top