1

I have the following code and I would like to decrease the brightness of the image so that I can color the text-white.

However, the brightness filter carries onto the text. I've tried making an adjustment to the z-index, but it is not working. Can someone please provide me with a solution?

.jumbotron {
    background-size: cover;
    background-position: center;
    width: 100%;
    filter: brightness(80%);
    z-index: -1;
}

.z-index {
color: white;
}
<div class="jumbotron card card-image" style="background-image: url(http://mediad.publicbroadcasting.net/p/wamc/files/201609/codingsnippet.jpg);">
  <div class="text-center py-5 px-4 z-index">
    <div>
      <h2 class="card-title pt-3 mb-5 font-bold">E-commerce and Blogging website Experts</h2>
      <p class="mx-5 mb-5">Do you need to increase traffic to your website? Do you want to increase sales on your e-commerce store? We're here to help you in that regard!
      </p>
    </div>
  </div>
</div>

1 Answers1

0

The structure of your HTML tags makes it difficult to achieve your goal. I would

  1. Create a div giving it a class container that takes position: relative.
  2. Take out the text div z-index from the image div jumbotron and put both the divs in container div.
  3. Set the size of the image by giving this value to the image div, width: 100%; height: 120px;
  4. Then give the text containing div position: absolute to float it and also give it top: 0; left: 0; to manually place the texts on top of the image div.

This way, the text div won't be affected when the image div is styled. 

.container {
  position: relative;
}

.jumbotron {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 120px;
  filter: brightness(60%);
}

.z-index {
  color: white;
  position: absolute;
  top: 0;
  left: 0;
}
<div class="container">
  <div class="jumbotron card card-image" style="background-image: url(http://mediad.publicbroadcasting.net/p/wamc/files/201609/codingsnippet.jpg);"></div>
  <div class="text-center py-5 px-4 z-index">
    <h2 class="card-title pt-3 mb-5 font-bold">E-commerce and Blogging website Experts</h2>
    <p class="mx-5 mb-5">Do you need to increase traffic to your website? Do you want to increase sales on your e-commerce store? We're here to help you in that regard!</p>
  </div>
</div>
terryeah
  • 583
  • 5
  • 17