4

I saw some similar questions regarding this. But my approach is different and none of those works to me. That's why I'm posting this. I want to change the opacity of background image without changing the opacity of child elements, where background-image is loaded inside the body tag.

html :

<body>
    <div id = "background-div">
        <div class = "header">
            <div class = "ham-icon">
                <img src = "images/ham-icon.png">
            </div>
            <div class = "logo">
                <span class = "google-logo">Google</span><span class = "hangouts-logo"> Hangouts</span>
            </div>
            <div class = "profile-data">
            </div>
        </div>
        <div class = "body">
        </div>
    </div>
</body>

css: 

body
{
    position: relative;
    background: url(../images/back1.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
ONE_FE
  • 968
  • 3
  • 19
  • 39

4 Answers4

13

HTML Background with BODY filter

<HTML> gets a background image while <body> gets a 50% transparent white (layer of transparent color using RGBA)

html, body {
  height:100%;
  padding: 0;
  margin: 0;
}

html {
  background:url(https://i.ytimg.com/vi/qOfuTI5165w/maxresdefault.jpg) no-repeat center center fixed;
}

body {
  background:rgba(255,255,255,0.5); /* applies a 50% transparent white background */
}

Using CSS pseudo selector :before for body

Another way is using the pseudo selector for body, which can be a "layer" behind the actual body that can get the opacity property without affecting other elements.

html, body {
  height:100%;
  padding: 0;
  margin: 0;
}

body:before {
  background:url(https://i.ytimg.com/vi/qOfuTI5165w/maxresdefault.jpg) no-repeat center center fixed;
  display: block; content:""; position: absolute; z-index:-1;
  top:0; left: 0; right: 0; height: 100%;
  opacity:.5;
}
Aziz
  • 7,685
  • 3
  • 31
  • 54
3

You can try the following workarounds:

1) use an image which already has an alpha channel, such as png;

2) have the background div ad a sibling and not as a parent of the other elements, and change their position with css, such ad position:absolute; z-index; and so on.

3) if your image only consist in colours, you can leave your html untouched and use rgba/css gradients

Enrico
  • 408
  • 6
  • 13
1

You can put the background to a separate <div>:

<body>
    <div id="content">
        <div id="background-div"></div>
        <!-- content -->
    </div>
</body>

Then position and style to fill the entire content.

#content {
    positon: relative;
}

#background-div {
    position: absolute;
    width: 100%;
    height: 100%
    opacity: 0.5;
    background: url(...);
}
martin
  • 93,354
  • 25
  • 191
  • 226
-2

use direct child selector body > .backgroudimg{ blah blah }

iM COCO
  • 1
  • 1