0

I have banner image kinda setup and text lies above the image. Since most of the time image is brighter than the text. I want to add some color above the image and reduce the overlay's opacity. When i did this background color just goes below the background image so i am not able to see any overlay on the image and still the image looks brighter

#banner-image {
  background-size: cover;
  background-image: url('https://dusy1lvven6c5.cloudfront.net/content/attachment/640/Dear_Women-Exercise-Your-Right-To-Invest-Blog-1024x768.jpg');
  background-color: rgba(0, 0, 0, 0.6);
}
<div class="row overlay" id="banner-image">
  <div class="col-lg-12 col-md-12 col-sm-12">
    <div class="col-lg-6 col-md-6 col-sm-6 col-md-offset-6 col-sm-offset-6" id="banner-content-div">
      <p id="intro-text">What are mutual funds ?</p>
      <p id="intro-exp">Mutual funds, you've seen them on TV and magazine covers.. but what are they? And how do they work?...</p>
      <a href="mutual_fund.html" class="btn btn-default btn-readmore">Read more</a>
    </div>
  </div>
</div>
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
Naveen Kumar
  • 1,476
  • 5
  • 28
  • 52

0 Answers0