Kevin Powell - Community•2mo ago

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

3 Replies

ἔρως•2mo ago

you can use a mixin for it something where you can use @include bg-image("image.jpg"); and it generates the background image with the gradient

capt_uhu•2mo ago

as long as you don't need to add a border or a border-radius you can do this with border-image: https://frontendmasters.com/blog/quick-trick-using-border-image-to-apply-and-overlay-gradient/ another way is to use a pseudo element with the gradient background but that requires more set up

lamoo7OP•2mo ago

Thanks guys! I went with the first solution, which seems to be just a little workaround to what I have previously had, but it's effective enough so I do not repeat the code over and over again :D. If anyone has the same issue as I had, I will leave the mixin here

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

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

Gaming

Programming

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