giving background img an opacity

Question

I'm trying to give my full page background-image an opacity but when I add the opacity code, my whole html get's an opacity of 0.4 exept the image.

html { 
  background: url(../img/bg2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Source

I tried to add opacity like this:

html { 
  background: url(../img/bg2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  opacity: 0.4;
}

But as I said, my whole html turns 0.4

And I tried to add 0.4 after background: url(../img/bg2.jpg) no-repeat center center fixed 0.4; but my image just goes blank then.

How can I add 0.4 only to my background-image?

Find your Answer here http://stackoverflow.com/questions/4183948/css-set-background-image-with-opacity — roottraveller, Nov 24 '15 at 09:29
Try this http://stackoverflow.com/questions/4183948/css-set-background-image-with-opacity — Anandh Sp, Nov 24 '15 at 09:33

Ionut Necula · Accepted Answer · 2015-11-24T09:38:03.353

1

Try using ::after pseudoclass:

html::after {
  content: "";
  background: url(../img/bg2.jpg) no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
  background-size: cover;
  opacity: 0.4;  
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0;
  z-index: -1;
}

edited Nov 24 '15 at 09:38

answered Nov 24 '15 at 09:31

Ionut Necula

11,107
4
45
69

My bg-img just goes blank again – Blank Nov 24 '15 at 09:34
@Blank, see my updated code. It should work now. – Ionut Necula Nov 24 '15 at 09:38

score 0 · Answer 2 · edited Mar 16 '17 at 09:29

0

Set opacity for body also and try again :

body {
   opacity : 1;
}

edited Mar 16 '17 at 09:29

Ionut Necula

11,107
4
45
69

answered Nov 24 '15 at 09:26

Harsh Sanghani

1,666
1
14
32

why you place down vote, can you tell me? – Harsh Sanghani Nov 24 '15 at 09:28
If I set opacity on body, it still has the same effect, it doesn't change the img – Blank Nov 24 '15 at 09:29
can you place your code in jsfiddle? – Harsh Sanghani Nov 24 '15 at 09:30

score 0 · Answer 3 · answered Nov 24 '15 at 09:43

I use the :after psuedo element on the body tag in these cases, together with some absolute positioning and the opacity property: https://jsfiddle.net/kc0sf39r/

HTML:

<body>
  content
</body>

CSS:

body {
    background: url("http://digital-photography-school.com/wp-content/uploads/flickr/205125227_3f160763a0_o.jpg") no-repeat;
    width: 100%;
    height: 100vh;
    position: relative;
}
body:before {
    position: absolute;
    top: -99px;
    bottom: -99px;
    left: -99px;
    right: -99px;
    background-color: red;
    content: " ";
    opacity: 0.5;

}

giving background img an opacity

3 Answers3