How do I lower the background-image opacity while leaving the text 100% visible?

Question

The background img of the header should be translucent and the text should be fully visible.

I've tried a multitude of fixes on this site and others including using :before

HTML:

 <div class="banner">
        <div class="bannerimage">
          <div class="bannertext">
        <h1>Welcome to my Portfolio</h1>
        <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h2>
        <a href="#">A link <span><i class="fas fa-caret-right"></i></span></a>
      </div>
    </div>
  </div>

CSS:

.banner {
  width: 100%;
}

.bannerimage {
  background-image: url("img/banner.jpg");
  position: relative;
  height: 500px;

}

.bannerimage:before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0,0,0,0.7);
  opacity: 0.4;
}

.bannertext {
  color: 111;
  position: relative;
  text-align: right;
}

Background should be translucent foreground text should be solid.

Front End Coder · Answer 1 · 2019-10-01T13:13:08.553

If you give opacity to parent .banner-image it will affect its child. So update your code like:

.banner {
      width: 100%;
      position: relative;
    }

    .bannerimage {
        background-image: url(https://via.placeholder.com/1000x700);
        position: relative;
        height: 500px;
        opacity: 0.5;
        background-size: cover;

    }
    .bannertext {
      color: #111;
      text-align: right;
      position: absolute;
      top: 0;
      width: 100%;
    }

      <div class="banner">
        <div class="bannerimage">
              
        </div>
        <div class="bannertext">
                <h1>Welcome to my Portfolio</h1>
                <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h2>
                <a href="#">A link <span><i class="fas fa-caret-right"></i></span></a>
              </div>
      </div>

This doesn't lower the opacity, of the background? If that makes sense? The 1st image is how it looks currently, the 2nd image is how the background should be but the text should remain as it is in the 1st image https://imgur.com/a/D0vSM3B — macatwork, Oct 01 '19 at 12:53
updated my answer, check now! you can do by this way or you have to add background in .bannerimage::after . — Front End Coder, Oct 01 '19 at 13:13

score 0 · Accepted Answer · answered Oct 01 '19 at 10:56

You can use this code

       body {
            margin: 0;
            padding: 0;
        }   
        .banner {
          width: 100%;
        }
        .bannerimage {
            width: 100%;
            height: 500px;
            display: block;
            position: relative;
            background: rgba(0,0,0,0.7);
        }
        .bannerimage::after {
            content: "";
            background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/codepen.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            position: relative;
            opacity: 0.4;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            position: absolute;
            z-index: -1;   
        }
        .bannertext {
          color: 111;
          position: relative;
          text-align: right;
        }
        .bannertext h1 {
          margin-top: 0px;
          color: #fff;
        }
        .bannertext h2 {
          color: #fff;
        }
        .bannertext a {
          color: #fff;
        }

    <div class="banner">
        <div class="bannerimage">
            <div class="bannertext">
                <h1>Welcome to my Portfolio</h1>
                <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h2>
                <a href="#">A link <span><i class="fas fa-caret-right"></i></span></a>
            </div>
        </div>
    </div>

How do I lower the background-image opacity while leaving the text 100% visible?

2 Answers2