Add an overlay to a background-image with one line of CSS

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:11 - The long way with a pseudo-element
01:00 - Using a border-image instead
03:10 - CSS Demystified
03:42 - The fill keyword
04:20 - Making the gradient transparent
04:50 - Removing the extra space around the image
05:09 - Using the border-image shorthand to make it one line of CSS

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[KevinPowell]

A few questions here about doing this with a second line in the background-image declaration, which you can totally do, but it has one drawback! I should have addressed it in the video. That works fine if you only need it once, but if you need several images with the overlay, it's a lot easier to have the overlay as it's own class like I have here, and you can put it anywhere you need it. If you did it within the background-image declaration, you'd need to repeat that gradient everytime you declare a background-image. Not a big deal, but a bit easier to do this if you have several images that need it.

[feldinho]

I usually achieve this by using the multiple backgrounds declaration, with a bonus of being able to change blending modes.

This is a sweet alternative, though, since this declaration can be on a separate utility class, and making the image a custom property would allow us to add any overlay on top of any element.

[nutsune]

I know a lot of people says this all way but it is just amazing that on almost every video, I can learn something that can be useful and I've been web developing since 2008. Thank you!

[ElixerProgramming]

I always wondered how to do this but never looked it up as I didn't need to yet. Good timing.

You re the holly book of css world Kevin. God bless 🙏🏻

[cseymour]

Usually if I'm just adding a simple overlay like that I'll just do like

background-image: linear-gradient(rgb(0, 0, 0, .5), rgb(0, 0, 0, .5) ), url( [your url] ) :

[zarkasias]

That’s a great solution. I like having the overlay as its own class.

[tjejenathina]

What absolute menacery, using a border to be the very opposite of a border. I love it! thanks

[eworld]

Wow I've never even heard of border-image-slice but this is a really neat fix and seems to be good on caniuse. Thanks for this one Kevin!

[tomasvn]

Learned something new from CSS, and I have been writing css couple of years now, thank you kevin. Good tip.
Also good tip is to use grid to overlay it on top of each other, you dont need to use absolute :)

[PicSta]

This is amazing. Wish I had known this trick exists way earlier. Sounds too easy.

[MrBlaq]

Awesome! I love these advanced tutorials, they are extremely helpful and time saving. Please ignore those who complain about ‘readability’, they’ll eventually catch up.

[wizardos]

Good job Kevin, always a pleasure to learn from your great teachings 🙌🙌🙌

[chaayparcharcha]

2-3 Week ago I found your chennal and it js really amazing... Love from India 👍🏼❤️🙏🏼

[gnhjccc]

That's much better CSS line Kevin instead of using positioning.
I like this kind of method.
Cheers from Indonesia!

[orvinl]

I’m stuck in my project because of this problem. But somehow you made this video. Thank you😀

[kooweso]

0 dislikes and that's how it should be, we love you Kevin <3

[ShellBryson]

As I yet again hack a overlay in and entirely forget about border-image... Thanks for the reminder!

[RyanOlton]

Clicked for the overlay hint and now off to explore gradient borders! 😆

[hielkebrandsma]

Really, really nice find! But .. there's a little caveat if you use it on a container with a fixed position, like a body background image 😀 Maybe you'll come up with an easy solution to get around this! Love your video's! Keep up the good work :)