How to change the opacity of background without changing the content of it?

Question

I don't know how to make background-image opacity 0.5 and the content full opacity.

.about-section {
  height: 100%;
  padding-top: 50px;
  text-align: center;
  /*background: #eee;*/
  background: url(../images/about.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.3;
}

<section id="about" class="about-section">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <h1 class="head">About Us</h1>

      </div>
    </div>
  </div>
</section>

https://stackoverflow.com/questions/44398224/set-background-image-with-transparent-color-and-also-make-the-height-of-the-imag/44398374#44398374 — tech2017, Jun 07 '17 at 13:59
The best solution would be to simply change your image to be more transparent. Other than that, you can try keeping the image as a seperate element. — gaynorvader, Jun 07 '17 at 14:04
Possible duplicate of [CSS Background Opacity](https://stackoverflow.com/questions/10422949/css-background-opacity) — Hidden Hobbes, Jun 07 '17 at 14:06

score 5 · Accepted Answer · answered Jun 07 '17 at 14:04

Is this the sort of thing you're after?

  .about-section {
    height: 100%;
    padding-top: 50px;
    text-align: center;
  }
  
  .background {
    height: 100%;
    width: 100%;
    position: absolute;
    background: url(https://ichef-1.bbci.co.uk/news/976/media/images/83351000/jpg/_83351965_explorer273lincolnshirewoldssouthpicturebynicholassilkstone.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0.3;
    
  }

<section id="about" class="about-section">
  <div class="background">
  </div>
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <h1 class="head">About Us</h1>
      </div>
    </div>
  </div>
</section>

No worries @Y.EzzEldin – dennispreston Jun 07 '17 at 14:13 — dennispreston, Jun 07 '17 at 14:13

score 2 · Answer 2 · answered Jun 07 '17 at 14:08

You can use pseudo elements to get it just like following

.about-section {
  height: 100%;
  padding-top: 50px;
  text-align: center;
  /*background: #eee;*/
  background: url(http://lorempixel.com/400/200/);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: relative;
}

.about-section::after {
  content: '';
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.5); /*Change as your need */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

<section id="about" class="about-section">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <h1 class="head">About Us</h1>

      </div>
    </div>
  </div>
</section>

score 1 · Answer 3 · answered Jun 07 '17 at 14:07

You can use the ::before´-pseudo-element.

.about-section {
  position:relative; /* Notice this */
  height: 100%;
  padding-top: 50px;
  text-align: center;
}

.about-section::before {
  content:'';
  position:absolute;
  width:100%;
  height:100%;
  left:0px;
  top:0px;
  background: #000; /* change to whatever you want */
  opacity:0.3;
}

<section id="about" class="about-section">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <h1 class="head">About Us</h1>
      </div>
    </div>
  </div>
</section>

score 0 · Answer 4 · answered Jun 07 '17 at 14:00

For the moment, CSS does not offer that possibility (unless your background is just a colour, in which case you can use rgba()).

To achieve this, you can place your .about-section in position: relative; and create a <div> inside it (preferably as the first child, or even better, as a ::before pseudo-element) absolutely positioned, with full width and height. You can then tweak its opacity as you wish without affecting the content.

How to change the opacity of background without changing the content of it?

4 Answers4