0

I have set my main background to transparent, I am placing an image on top of the background it is inheriting the opacity 0.4, I don't want that. I want it to be 100%. I even tried opacity 1.0 didn't work here is my code:

HTML:

<!-- Background -->
<img src="img/bg.jpg" id="bg" alt="">

<!-- The image -->
<div class = "row">
    <div class = "logo">

      <img src="img/logo.png" width="100%" height="141" id="logo" alt="Title" /> 
      </div>
      </div>

CSS:

//Background
    #bg {
      position: fixed; 
      top: 0; 
      left: 0;
      opacity: 0.4; 

      width: 100%;
      min-height: 100%;
    }

//the image
#logo {
    opacity : 1.0;!important;
}
Scott Simpson
  • 3,832
  • 3
  • 27
  • 35
Johnny
  • 53
  • 1
  • 9
  • Possible duplicate of [Remove inheritance of opacity from parent?](http://stackoverflow.com/questions/21080235/remove-inheritance-of-opacity-from-parent) – blurfus May 20 '16 at 23:23

1 Answers1

0

It turns out that the opacity channel is inherited

try using the rgba property instead:

background-color: rgba(0, 0, 0, 1); /* red, gree, blue, alpha (opacity) */

Credit: answer adapted from this one

#bg {
  z-index: -1000;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.4;
  width: 100%;
  min-height: 100%;
}

.logo,
#logo {
  background-color: rgba(0, 0, 0, 1);
  padding:0;
  margin: 0;
}
<!-- Background -->
<img src="http://lorempixel.com/400/400" id="bg" alt="">

<!-- The image -->
<div class="row">
  <div class="logo">
    <img src="http://lorempixel.com/300/150" width="100%" height="150" id="logo" alt="Title" />
  </div>
</div>
Community
  • 1
  • 1
blurfus
  • 13,485
  • 8
  • 55
  • 61
  • Thank you for your reply, part of the issue was solved, i had later on full opacity with black background, i have to change this `.logo, #logo { background-color: rgba(0, 0, 0, 1);` to this `.logo, #logo { background-color: Transparent;` Then it worked perfectly! thank you! – Johnny May 20 '16 at 23:44