How to make one background mild between two background in Homepage? - html

Question

So I added Two background in Homepage. One is Blue shade and another is an Image. I want to That Blue shade to see more that image. How can I do it.
HTML:
<div class="banner banner-4 banner-4-bg">
<div class="container">
<div class="row">
<div class="col-12">
<div class="banner-content">
<h1>The Easiest Way to Find Job</h1>
<p>Find Jobs, Employment & Career Opportunities</p>
<div class="banner-search">
<form action="#" class="search-form">
<input type="text" placeholder="Enter Keywords">
<select class="selectpicker" id="search-location">
<option value="" selected>Location</option>
<option value="california">California</option>
<option value="las-vegas">Las Vegas</option>
<option value="new-work">New Work</option>
<option value="carolina">Carolina</option>
<option value="chicago">Chicago</option>
<option value="silicon-vally">Silicon Vally</option>
<option value="washington">Washington DC</option>
<option value="neveda">Neveda</option>
</select>
<button class="button primary-bg"><i class="fas fa-search"></i>Search Job</button>
</form>
<div class="trending-key">
<span>Trending Keywords:</span>
designer
php
ios
Android
Accounting
Management
</div>
</div>
</div>
</div>
</div>
</div>
</div>
MY CSS:
.banner-4-bg {
background: url(../images/bg/banner_home.png) , url(../images/bg/banner-4-bg.jpg) no-repeat center;
background-size: cover;
}
.banner-4 .banner-content {
padding: 290px 0 210px;
text-align: center;
color: #ffffff;
}
What I have now :
And What I want:
Help me out Good people :)

Answer 1

There are different ways to do it:
Modify the image and make the same as displayed in the second one.
Make another div same width and height as image and {position: absolute} such that it overlaps the image then { background-color: 'some gray or black color', opacity: 0.5 } (adjust opacity and background-color accordingly). also, write all the displaying content on the banner in this div.

Answer 2

You can adjust the transparency of an image by using CSS opacity, where opacity is between 0.0 - 1.0 and the lower value, the more transparent, e.g.:
.banner-4-bg {
background: url(../images/bg/banner_home.png) , url(../images/bg/banner-4-bg.jpg) no-repeat center;
background-size: cover;
opacity: 0.5;
}
.banner-4 .banner-content {
padding: 290px 0 210px;
text-align: center;
color: #ffffff;
}

Answer 3

Here you go(view it in full screen mode):
I tried to get the images you shared and used it may the clarity is not clear. You may need to use the texts field as you want. As I mentioned in comments interchange the background:urls that should fix for you.
When using the multiple background images, images will be stacked upon each other and the first is the closest to the view.
.banner-4-bg {
background: url(https://i.postimg.cc/DyJRcGNB/Px3iz.png), url(https://i.postimg.cc/wTL0vQZ8/azHDz.jpg) no-repeat center;
background-size: cover;
}
.banner-4 .banner-content {
padding: 290px 0 210px;
text-align: center;
color: #ffffff;
}
<div class="banner-4-bg">
</div>
<div class="banner banner-4 banner-4-bg">
<div class="container">
<div class="row">
<div class="col-12">
<div class="banner-content">
<h1>The Easiest Way to Find Job</h1>
<p>Find Jobs, Employment & Career Opportunities</p>
<div class="banner-search">
<form action="#" class="search-form">
<input type="text" placeholder="Enter Keywords">
<select class="selectpicker" id="search-location">
<option value="" selected>Location</option>
<option value="california">California</option>
<option value="las-vegas">Las Vegas</option>
<option value="new-work">New Work</option>
<option value="carolina">Carolina</option>
<option value="chicago">Chicago</option>
<option value="silicon-vally">Silicon Vally</option>
<option value="washington">Washington DC</option>
<option value="neveda">Neveda</option>
</select>
<button class="button primary-bg"><i class="fas fa-search"></i>Search Job</button>
</form>
<div class="trending-key">
<span>Trending Keywords:</span>
designer
php
ios
Android
Accounting
Management
</div>
</div>
</div>
</div>
</div>
</div>
</div>