I recently made some changes to the Homepage by adding two different backgrounds - one in blue shade and the other as an image. However, I want the blue shade background to be more prominent than the image background. How can I achieve this?
<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>
<a href="#">designer</a>
<a href="#">php</a>
<a href="#">ios</a>
<a href="#">Android</a>
<a href="#">Accounting</a>
<a href="#">Management</a>
</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;
}
Current State : https://i.sstatic.net/azHDz.jpg
Desired Outcome:
https://i.sstatic.net/Px3iz.png
Looking for some assistance here:)