1

I want to add an opacity layer over my fullscreen background image with these settings:

rgba(77,85,91,0.8)

I am using the following CSS to set my background cover:

  background: image_url("landing_page/background.png") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

The page image loads fine - but I cannot work out the correct CSS3 syntax to apply this overlay opacity to the fullscreen html background image.

I tried adding a new CSS class called 'overlay' to the HTML element which had the following CSS:

  background: rgba(77,85,91,0.8);
    overflow: hidden;
    height: 100%;
    z-index: 2;

with this html:

<html class="overlay" lang="en">

But the result of this is just the grey colour without being able to see my image underneath.... Please help

RenegadeAndy
  • 5,440
  • 18
  • 70
  • 130
  • 1
    and also [this question](http://stackoverflow.com/questions/18322548/black-transparent-overlay-on-image-hover-with-only-css) and [this question](http://stackoverflow.com/questions/21086385/how-to-make-in-css-an-overlay-over-an-image) – web-tiki Jan 11 '16 at 15:49
  • 1
    With your “new class” you are _overwriting_ the `background` property … CSS does not have any kind of “additive” behavior, where the property values from different rules would be somehow combined into a new value (that just would not make sense.) – CBroe Jan 11 '16 at 15:50
  • already marked as dupe, but here's a quick example using your styles: https://jsfiddle.net/r1o8juqk/ – Joseph Marikle Jan 11 '16 at 15:55

0 Answers0