1

So I have this code right here, 3 boxes each have a background photo(set with url on CSS, not added in HTML). I'm trying to make the photo darker because the white text does not look good at the moment. When I try to do that, it makes everything opaque, including the text.

#box-one,
#box-two,
#box-three {
  font-size: 25px;
  padding: 30px;
  width: 200px;
  height: 200px;
  text-align: center;
  color: white;
  box-shadow: 15px 15px 13px #aa924ba8;
}

#box-one {
  background: url(./img/barsana.jpg);
}

#box-two {
  background: url(./img/mocanita.jpg);
}

#box-three {
  background: url(./img/food.jpg);
}
<div class="container-hl">
  <div id="box-one">
    <h3>Barsana</h3>
    <hr />
    <p>Built in 1970, located in the homonymous village, on a beautiful hilltop</p>
  </div>

  <div id="box-two">
    <h3>Info</h3>
    <hr />
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, beatae id. Ducimus?</p>
  </div>

  <div id="box-three">
    <h3>Info</h3>
    <hr />
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione.</p>
  </div>
</div>
cloned
  • 6,346
  • 4
  • 26
  • 38
Maolean
  • 9
  • 3
  • Add an absolutely positioned div/pseudo elelemt over the image (height and width 100%), under the text and give that a black background and adjust the opacity of it – Andy Holmes Apr 27 '22 at 08:39

1 Answers1

1

CSS allows us to layer backgrounds by providing multiple comma-separated values to the background property. I would use this to your advantage and get creative with multiple backgrounds.

#box-one {
  background: rgba(0, 0, 0, 0.5), cover no-repeat url(./img/barsana.jpg);
}

#box-two {
  background: rgba(0, 0, 0, 0.5), cover no-repeat url(./img/mocanita.jpg);
}

#box-three {
  background: rgba(0, 0, 0, 0.5), cover no-repeat url(./img/food.jpg);
}

Instead of making the element opaque, the above code instead applies a dark overlay to the background image, allowing your white text to be more eligible.

Alex Ander
  • 1,430
  • 12
  • 19