Home/ Questions/Q 9241963
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T08:28:47+00:00

I use box-shadow on the html element to give the background of a website

  • 0

I use box-shadow on the html 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 box-shadow will only display in the part of the site which is viewable at the first glance. If you scroll down, the box-shadow stops working.

Here is my CSS 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');
}

I tried to apply the box-shadow to the body element, but that won’t work either. Surprisingly the background-image set for the body works just fine. The problem appears in all browsers (Safari 6, Firefox 18, Chrome 24 – all on Mac).
Is there a solution?

Here is a example: http://dreamapp.de/sites/portfolio/boxshadowproblem.html

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can put a <div> right after the <body> tag and move to it the CSS properties. Such as:

    HTML

    <body>
  <div class="vignette"></div>
  <!-- rest of your code -->

    CSS

    .vignette {
  position: fixed;
  /* to prevent empty space around the vignette */
  top: 0;
  left: 0;
  /* extends to the whole visible area */
  width: 100%;
  height: 100%;
  box-shadow: 0 0 200px rgba(0,0,0,0.9) inset;
}

    in this way the element will stay under all the other elements and you can scroll the content.

    • 0