CODEWITHSUNDEEP
htmlcss
ONE_FE
ONE_FE

Reputation: 996

Changing the opacity of background image in css

I saw some similar questions regarding this. But my approach is different and none of those works for me. That's why I'm posting this. I want to change the opacity of the background image without changing the opacity of child elements, where the 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;
}

Upvotes: 4

Views: 16574

Answers (4)

iM COCO
iM COCO

Reputation: 1

Use direct child selector:

body > .backgroudimg {
  blah blah
}

Upvotes: -2

Enrico
Enrico

Reputation: 418

You can try the following workarounds:

  1. Use an image that already has an alpha channel, such as PNG

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

  3. If your image only consists of colors, you can leave your HTML untouched and use RGBA/CSS gradients

Upvotes: 3

martin
martin

Reputation: 96891

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(...);
}

Upvotes: 1

Aziz
Aziz

Reputation: 7783

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;
}

Upvotes: 13

Related Questions