How to add overlay opacity over a background image?

Question

What I am trying to achieve sounds very simple but I can't get it to work.

I am trying to add opacity on top of the image so that the < h1 > tag is easier to read.

Here is my HTML:

<header>
  <section>
    <div class="img_content">
      <div class="bg_img" style="background-image: url('path-to-image');" >
        <div class="container">
          <h1 class="content_h1">Most Popular Lunches: Week 11</h1>
        </div>
      </div>
    </div>
  </section>
</header>

And here's the CSS:

/*Custom CSS */
.img_content {
  /* background: url(); */
  background-repeat: no-repeat;
  background-size: cover;
}
header section{
  padding:0;
}

@media screen and (max-width: 768px){
  .content_h1 {
    font-size: 40px;
    padding: 21% 0;
    color: white;
    font-size: 14px;
  }
  .section_details {
    padding: 8% 0 19% 8%;
    font-size: 14px;
  }
}

section {
  padding: 10px 0;
}

.bg_img {
  background: #221f1f73;
}
.content_h1 {
  font-size: 85px;
  padding: 14% 0;
  color: white;
}
.section_details {
  padding: 4% 0 0 0;
  font-size: 14px;
}

I think that the problem might be the -Z index or something similar?

Can you check this and see f you can work around something similar: https://stackoverflow.com/questions/49333122/css-border-confusion/49333522#49333522 — Omar Tanti, Mar 23 '18 at 05:59

score 7 · Answer 1 · edited Apr 01 '20 at 20:36

There are two handy ways to accomplish this, one with multiple backgrounds set via background-image and one via background-blend-mode.

Option 1.

background-image: linear-gradient(rgba(0,0,0,.5)), url(path-to-image);

For this option, you're setting a semi-transparent black background by taking advantage of the linear-gradient option of background-image, with a single value (though you could use multiple values for some visual interest), and then adding the image as a second background behind it. Adjust the values as needed.

Option 2.

background-blend-mode: multiply;
background-color: #666666;

For this option, you don't want to use black, because you won't see your image at all. You're accomplishing virtually the same effect to the eye, but doing it in a different way that's easier to read. Again, adjust the color as needed.

One final note: your background color on the .bg_img class is invalid. A hex color should have only 6 characters, where the first 2 give a value for red, the next two for green, and the last two for blue. The numbers range from 00 (hexadecimal for 0) to ff (hexadecimal for 255). Each two character combination designates how much red, green, or blue light is mixed to create the final color value. (When three characters are used, each is doubled, e.g., #0fc would be equivalent to #00ffcc). Hex values should always have either 3 or 6 characters.

I like the option 1 but linear-gradient needs 2 parameters, so I fixed it repeating the first one like: background-image: linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)), url(path-to-image); — Facundo Colombier, Apr 01 '20 at 20:34

score 1 · Answer 2 · answered Mar 23 '18 at 05:57

Keep your HTML same as posted. Then follow the below: First you need to set the class '.bg_img' like below:

.bg_img {
  background: #f5f5f5;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

then add a background overlay using the '::before' pseudo-class

.bg_img::before {
    content:"";
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display: block;
    background-color: rgba(0,0,0,.55);
}

And finally add 'position: relative' to '.content_h1' class like below:

.content_h1 {
  font-size: 85px;
  padding: 14% 0;
  color: white;
  position: relative;
}

Hooman Bahreini · Answer 3 · 2018-03-23T05:58:36.453

0

You cannot set the opacity on the background image, as it will be inherited by the elements inside the bg_img div (so h1 will inherit the same opacity)

What you need to do is to set the opacity using rgba

.bg_img {
    // this css rule is setting the opacity if image to 0.5
    background-color: rgba(34,31,31, 0.5); 
}

edited Mar 23 '18 at 05:58

answered Mar 23 '18 at 05:51

Hooman Bahreini

14,480
11
70
137

score 0 · Answer 4 · answered Mar 23 '18 at 05:52

0

You can do like this :

.bg_img {
  background: #221f1f73;
  opacity: 0.7;
}

Jsfiddle

answered Mar 23 '18 at 05:52

Amitesh Kumar

3,051
1
26
42

1

this way, h1 will inherit the same opacity... – Hooman Bahreini Mar 23 '18 at 05:56

score 0 · Answer 5 · answered Mar 23 '18 at 05:52

0

Try using, 'background-blend-mode' properties..

answered Mar 23 '18 at 05:52

Arun Mathew

69
6

score 0 · Answer 6 · answered Mar 23 '18 at 05:55

Try this

<header>
  <section>
    <div class="img_content">
      <div class="bg_img" style="background-image: url('https://i.stack.imgur.com/GsDIl.jpg');">

        <div class="container">
          <h1 style="position:relative;z-index: 100;" class="content_h1">Most Popular Lunches: Week 11</h1>

        </div>
        <div class="overlay" style="position:absolute;height:100%;width:100%;top:0;left:0;background:rgba(0,0,0,0.5)"></div>
      </div>
    </div>
  </section>
</header>

CSS

.img_content {
  /* background: url(); */
  background-repeat: no-repeat;
  background-size: cover;

}
header section{
    padding:0;
}

@media screen and (max-width: 768px){
  .content_h1 {
    font-size: 40px;
    padding: 21% 0;
    color: white;
    font-size: 14px;
  }
  .section_details {
    padding: 8% 0 19% 8%;
    font-size: 14px;
  }
}

section {
  padding: 10px 0;
}

.bg_img {
  background: #221f1f73;
  position:relative;
}
.content_h1 {
  font-size: 85px;
  padding: 14% 0;
  color: white;
}
.section_details {
  padding: 4% 0 0 0;
  font-size: 14px;
}

I've used inline css for easiness, though it's not recommended

score 0 · Answer 7 · edited Mar 23 '18 at 06:52

0

Try this one.

.page-heading {
    background: url(../images/sample/image.jpg) no-repeat fixed 50% 0px / cover;
    opacity: 0.9;
    box-shadow: inset 0 0 0 100px rgba(36, 70, 105, 0.74);
    position: relative;
    text-align: center;
    padding: 75px 0px;
    width:100%;
}

edited Mar 23 '18 at 06:52

Pang

9,564
146
81
122

answered Mar 23 '18 at 05:55

VijAsh

49
5

score 0 · Answer 8 · answered Mar 23 '18 at 05:58

You can try this method

h1 {
 font-size: 50px;
 color:#fff;
 position: relative;
    z-index: 10;
}
.bg_img {
 position: relative;
 background:url(https://preview.ibb.co/k2cREc/banner_about.jpg) no-repeat;
 background-size:cover;
 height: 400px;
 background-color:  rgba(0, 0, 0, 0.3);
 display: flex;
    justify-content: center;
    align-items: center;
}
.bg_img:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
}

<section>
    <div class="img_content">
      <div class="bg_img">
        <div class="container">
          <h1 class="content_h1">Most Popular Lunches: Week 11</h1>
        </div>
      </div>
    </div>
  </section>

Bhuwan · Answer 9 · 2018-03-23T06:51:50.660

Try to use :before pseudo element here with position: absolute to make an overlay over image

.bg_img {
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 0;
}

.bg_img:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: #221f1f73;
  z-index: -1;
}

header section {
  padding: 0;
}

@media screen and (max-width: 768px) {
  .content_h1 {
    font-size: 40px;
    padding: 21% 0;
    color: white;
    font-size: 14px;
  }
  .section_details {
    padding: 8% 0 19% 8%;
    font-size: 14px;
  }
}

section {
  padding: 10px 0;
}

.content_h1 {
  font-size: 85px;
  padding: 14% 0;
  color: white;
}

.section_details {
  padding: 4% 0 0 0;
  font-size: 14px;
}

<header>
  <section>
    <div class="img_content">
      <div class="bg_img" style="background-image: url(http://lorempixel.com/400/200/sports);">
        <div class="container">
          <h1 class="content_h1">Most Popular Lunches: Week 11</h1>
        </div>
      </div>
    </div>
  </section>
</header>

How to add overlay opacity over a background image?

9 Answers9