Add an overlay to a background-image with one line of CSS
Вставка
- Опубліковано 25 чер 2024
- Looking to take control of your CSS? Check out my course CSS Demystified 👉 cssdemystified.com/?...
🔗 Links
✅ Temani’s article on border-image: www.smashingmagazine.com/2024...
✅ CSS Demystified: cssdemystified.com/?...
✅ The finished code from this video: codepen.io/kevinpowell/pen/yL...
⌚ 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
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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 UA-cam channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
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.
I don't understand. You could just define a variable --outline and write background: url(your-image) var(--outline) and thereby avoid any code duplication, right?
The border-image trick also works with img tags, where a background gradient won't overlay the image
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] ) :
yes, and if you are using scss you can have a mixin or whatever with the gradient backed in for consistency
That works great! One advantage with this is, because you can have it as it's own class, you can add it anywhere that you need it. If you do it that way, you need to repeat the gradient delcaration every time. If it's a one-off though, no big deal at all!
@@KevinPowellor use custom property to keep "real" image separate.
for me this leaves a 1-2px row at the bottom that doesn't have the gradient overlay though when using background-position: center;
I'm lazy I just edit the image itself. 😁😁
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!
You re the holly book of css world Kevin. God bless 🙏🏻
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.
I just commented roughly the same thing then saw this (I removed my comment to avoid a dupe and added this to feed the algo)
I always wondered how to do this but never looked it up as I didn't need to yet. Good timing.
That’s a great solution. I like having the overlay as its own class.
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.
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!
This is amazing. Wish I had known this trick exists way earlier. Sounds too easy.
I love this! So many designs do this!
Good job Kevin, always a pleasure to learn from your great teachings 🙌🙌🙌
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 :)
You, my friend, are marvelous!
0 dislikes and that's how it should be, we love you Kevin
2-3 Week ago I found your chennal and it js really amazing... Love from India 👍🏼❤️🙏🏼
As I yet again hack a overlay in and entirely forget about border-image... Thanks for the reminder!
tnx for that elegant solution!
Ooo i like this one!
super helpful thank you for sharing!
That's much better CSS line Kevin instead of using positioning.
I like this kind of method.
Cheers from Indonesia!
Super cool!
Super cool
My mind just explode right now, thankyou Kevin =D
🤯 exactly
A little worried about browser compatibility’s
This is even supported in IE11, so you should be fine :D
thank you that's really great! and also with animation it can be super cool.
Brilliant tricks 👍
Clicked for the overlay hint and now off to explore gradient borders! 😆
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 :)
Thank you
thanks for this nice content
I’m stuck in my project because of this problem. But somehow you made this video. Thank you😀
Well that’s a sneaky one!
cool thanks for the tipss
Awesome 😎👍🏻👍🏻
Tks for sharing
Hey Kevin! 👋🏻
Thanks for the video.I will definitely use it. 😁
Oh! Also, will you make any videos about "box-shadow"ing? Like such as blending shadow etc.
TIL 🔥
Thank for this bro. I will start to play with this tomorrow. I've had way too much whiskey for tonight. LOL
🎯 Key Takeaways for quick navigation:
00:00 *🖌️ Overlaying a color or element on a background image in CSS can enhance readability.*
00:41 *🧩 Using a pseudo-element or adjusting z-index may be traditional methods, but they can lead to extra CSS and complexity.*
00:56 *🛠️ You can achieve the overlay effect with just one line of CSS by utilizing the border-image property creatively.*
02:48 *📚 Understanding how border images work is crucial for implementing this technique effectively.*
03:44 *🔍 Adding the 'fill' keyword to the border image allows it to cover the entire element, not just the border.*
05:25 *🚀 You can condense the CSS code to a single line using the border-image shorthand property, enhancing readability and maintainability.*
Made with HARPA AI
I call hacks.
But a nice one.
Thanks for sharing Kevin. 🤗
Nice 👍
Nice
goat
Very cool, the only problem I see is that it's bad practice to use a background image, a picture or img tag would be a lot cleaner
@KevinPowell , will you do video on View Transitions?
The downside of this is that if you want to change the overlay on, for example, hover, you can't use 'transition', because it uses background-image. In this case you need to use a method that can be exposed to transition, like opacity for example.
How do you handle border-radius when using border-image? Doesn't seem to work when i try this.
We can just apply the linear-gradient on the background-image of th class .hero
.hero {
background-image: linear-gradient(purple, transparent), url("path.jpg");
}
You're a wizard, man
In the source article, as well as your other video where this technique is shown, a slice value of 0 is used. According to the article, that essentially makes the fill area the same size as the container. Is there a reason you've used a slice of 1 here? Thanks!
Looking at the spec, I think 1 would mean a 1px offset, so I think it should be 0.
my life will never be the same
Oh man!
Is there a way to add a blur effect as opposed to a gradient? Or both a blur and gradient?
I have a request , can you please explain a little bit on the first process you showed to us which is by before and using z-index, which is creating a new context, if you make a separate video on this (the way you teach most difficult concept in most easiest way ) will be very much helpful.
i think he has a video on that already
@@agirl2564 Can you please the url please, if you have , It will be really helpfull for me, thanks a lot
Hi Kevin, This is Varsha from Pune India I am learning css and someone suggested your channel for better understanding, but as I am a beginner, I am not getting from where I should start. Because there are no.of videos on your channel so please suggest me. Thank you 😊
👏👏👏
Would I use this to keep the html „clean“ / free from unnecessary divs? I usually create a div (and call it something like“bg-filter”) with a linear-gradient background, position absolute and a lower z-index.
Yes a general principle is to avoid decorative divs and replace them with pseudo-elements. But here, Kevin goes a step further and explains that you don't need pseudo-elements either (in this example).
Nice. Will it ever replace my :after with background colour, inset 0, absolute positioning and z-index though?! That's the biggest question 😂
❤✌
*background-image: linear-gradient(**#00000080**, **#00000080**), url('photo.jpg');*
That's all we need. Nothing more, nothing less.
🤯
It is Working only working with css background img ?
stripe dropdown menu tutorial pls
would be cool if we can use gradient functions with backdrop-filter. At least it would be more clear than this trick with border-image
I do the linear gradient on the background-image property and I put next to it the img URL and it works no overly or anything, is there a problem with my method, I was wondering why I don't see a lot of people do it
See the pinned comment by Kevin.
Applied to image tags, it is not working. Did I miss something?
why it doesn't work on my section :(. I do the same
No downvote ...best teacher ever
Can anyone tell me why does place content work without any grid or flex?
They updated the spec so that it works with display: block now too :)
One drawback i noticed is that it won’t work together with a border-radius. 🤷♂️
I hit the same problem.
Who are you warrior 😎?
Could masks be used for this?
Literally first
can't you just add another background layer for that?
You could! The advantage here is you can have it as it's own class, and then re-use it anywhere you need it. If you do it as a background-image, you'd have to redeclare it every time you declare the image. Not a big deal, but this just becomes a bit easier to use if you need it in several places.
Bit hacky and not a one-liner but still cool ! I have been using background-image with a repeating noise png and linear-gradient and comma seperated background-repeat values for the image and gradient. Works really well
border-image seems short and handy, but I think it's not descriptive, or maybe it has misleading descriptiveness of code, so, if you look your code after 2 weeks, you may find it difficult to re-understand why you wrote border-image.
hmm just write comment (?) -> 2 lines of code with comments are much better than using psuedo element
for development i leave comments everywhere and just strip them for production
A simple comment should do the trick :)
It's exactly the same reason why I would not use it. It is a hack and not an intended use of the border property. It's not just confusing to myself after reading the code after a while, it will definitely be confusing to my coworkers when they read the code. And yeah comments are an option but they should only be used when the code cannot be written in such a way that it is self-documenting - this is one general principle of code quality. And in this case the comment cannot even be short (unless you allow leaving a link to Kevin's video). Also, keep in mind that hacks often are not customizable enough. In this example, others have commented that the hack does not work when the image has a border-radius.
@@ScriptRaccoon maybe you need to study more as an engineer (?). This is really intuitive for a real engineer.
You are using a background-image which I would advise against since background images don't support sourcesets (yet) and you are working with a 100vw image. This is not a good practice concerning page speed. Instead I would place the image in the view with a picture/img tag which not only gives you full control over the srcset, but also provides you with the classic alt-tag for accessibility purposes.
Instead of creating an overlay through a pseudo-element you could also just place the gradient as a background-image on the hero and give the image an opacity value.
Who writes css now a days every professional project use tailwind
It's CSS, it's werid, right?