How to add overlay opacity over a background image? [duplicate]

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.

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

You can do like this :

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

Jsfiddle

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

Try this

<header> <section> <div class="img_content"> <div class="bg_img" style="background-image: url('https://i.sstatic.net/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

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

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>

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>

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