lamoo7 Posts - Answer Overflow

lamoo7

•Created by lamoo7 on 11/3/2024 in #front-end

Need Help: Combining Gradient and Image Backgrounds on a Single Element

I am currently working with five elements, each having its own distinct background image. However, I need all of them to feature the same gradient overlay. I attempted to set this up as follows:

$gradient-overlay: linear-gradient(135deg, #000 20%, transparent);
.one {
  background: url(image.jpeg), $gradient-overlay;
}

$gradient-overlay: linear-gradient(135deg, #000 20%, transparent);
.one {
  background: url(image.jpeg), $gradient-overlay;
}

Unfortunately, this approach requires me to include the $gradient-overlay variable in each individual image class, which is not ideal. My HTML structure is as follows:

<div class="box-container">
  <div class="box one">Box 1</div>
  <div class="box two">Box 2</div>
  <div class="box three">Box 3</div>
  <div class="box four">Box 4</div>
  <div class="box five">Box 5</div>
</div>

<div class="box-container">
  <div class="box one">Box 1</div>
  <div class="box two">Box 2</div>
  <div class="box three">Box 3</div>
  <div class="box four">Box 4</div>
  <div class="box five">Box 5</div>
</div>

I also tried applying the gradient directly to the .box class, but this method did not yield the desired effect, even with the use of background-blend-mode: multiply. I would like the result to display the image fully covered by the gradient, giving it a subtle overlay effect. However, I’m struggling with the correct syntax or approach to achieve this in my styles. Codepen for refference: https://codepen.io/lamoo7/pen/rNXKPpg

5 replies

Gaming

Programming