Transparent background with body::after limited by the screen size

Question

I've been using that code on my body, to get a full background with some mi-transparent white background on it :

body { 
      background: url('../images/bg.jpg') no-repeat center center fixed;
    padding-top: 50px; 
}

body::after {
  content: "";
  background: white;
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

The problem is that the white background doesn't go lower than the screen size as you can see here. Any idea how to fix that ?

Answer 1

It's because body::after isn't fixed, change the css like this :

body::after {
  content: "";
  background: white;
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  z-index: -1;   
}

Here is an example with a black background

Answer 2

Instead of using a ::before or ::after pseudo element, you can use css multple backgrounds.

1. Generate the base64 from this site: http://px64.net/
2. Apply the background to the body element.

#foo {

  width: 400px;
  height: 150px;
  visibility: visible;

}

#foo {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNgYPhfDwACggF/yWU3jgAAAABJRU5ErkJggg==) repeat, url(http://www.openkorat.com/wp-content/uploads/2015/08/extra-bg-green.jpg) no-repeat;
  background-size: auto, cover;
}

<div id="foo"></div>