Hi there my friend and friends. If you've ever had text on top of a background image like I have here you've probably run into the situation where it's kind of hard to read and you want to overlay a color or something on there. One solution that I've done a whole bunch of times is to come in and add a pseudo element. So then we end up with you know a whole bunch of extra CSS here to add the pseudo element but of course then that goes on top of our text. So I come back on my hero here and I'll do a position of relative first of all, so it's not taking up the whole viewport.
But that doesn't quite help because even if I come here with a z-index of negative one, now it's going behind the background image, which I don't really want to do. So then I have to come back. You can get the children, I guess, but you could also come here and do a z-index of like a two or whatever. It doesn't even matter what we put here, but it's creating a new stacking context.
And now the negative one is in there. Whatever. This works and it's cool. But there's a way we can do it with one line of CSS instead of creating a pseudo-element and having all of this extra code that we just don't need.
So let's jump on over to this version right here where I have the same thing set up. And for this one, instead of doing it on the hero, I'm going to create an overlay class just to sort of separate concerns a little bit. Then you could use this wherever you want. And, you know, if you had ten different things with background images, you could use it on all of them.
And then what we're going to do is we're going to come in with that overlay. And we're going to be doing something weird here because we're actually going to be using a border image. And this might seem really weird. We're going to start with a border image source. And we'll come in here with the same linear gradient that I had.
Because it could be a solid color. You just use, you know, if I did a blue, blue, then it would be the same for both of them. But because it is a image that we're using, it does have to be a gradient.
And you won't be setting it as a solid color. But again, if you need one, you just put the same thing. But let's just do a red, blue, so I have the two colors going in. which right now does nothing.
And this is because this is a border image. And if you know borders, you also need a few different things on here. And we're going to shorten this up a little bit, but I just want to explain how this is working. So you actually understand what's going on. We'll come in here with a border style of solid.
And now I have gradients, but they're weird and just showing up in each corner. And that's because border images are kind of strange. So we're getting there, we're getting closer, it might not look like it but we are.
And that's just because the way border images work is we create the image, but then you have to slice the image up. I'm not going to be deep diving how border images actually do work, just because there's a lot more in here and I just want to look at this one solution for now. If you do want to learn more about how they work, I'm going to link to this article in the description.
It's by Tamani Afif over on Smashing Magazine that goes a lot more in depth. But it's also where I got this tip from on how this works, so a full credit to Manny for this, and also to Adam Argyle, who's the one who shared the article with me and showed this trick to me in the first place. But what we'll do here is we're going to come down, and we're going to add a border image slice, and we're going to put 1. And this is one of those weird properties you can go to that article to learn more about, but look at that, we have a border image that's going around it, and it's not what we want yet, but oddly enough, this is the direction we need to be going in. And we just have like one little thing left, but right before we get to the good part, I just want to let you know that if you are looking to up your CSS game, I have CSS courses to help you, and one of them is called CSS Demystified, which is for people that have been writing CSS for a little while now, but they feel like they're stuck or they haven't fully unlocked CSS yet.
It goes over a lot of the fundamentals and the real impact those can have, as well as diving into the parts of CSS that don't often get talked a lot about, but build that strong foundation so you become a lot more comfortable and are able to start writing CSS with confidence. If you'd like to learn more about it, there is a link in the description. But for now, let's get back to this weird border trick that we're going to do, because as I said, there's this one more thing that we actually need, which is where we have our border image slice.
I'm going to add the fill keyword. Watch what happens here as it reloads. What? It's so strange, right?
But basically we're saying that instead of just being around the border, we actually want to fill in the empty space as well. So yeah, border image that's no longer just a border image, it's a full covering image. It's CSS, it's weird, right?
Most of the time it actually does make a lot of sense, and that's why I'm breaking this down step by step instead of just giving you the final solution, because I want to make sure you understand it. But obviously the first thing we need to do is we actually need the gradient to be a little bit transparent so we can see it. And I don't want to lower just the opacity on the overlay because the overlay is the element itself and not just this Gradient and that means the whole thing would lose opacity.
So here where I have my border image source We want to just change the linear gradient still using blues and reds but we're just lowering the opacity of those to a 0.3 on each one of the colors and you can sort of see that we're almost there except now we have this like space that's Going all around the image right that includes the border because we have a border width of 10 pixels and a border style solid that's where the gradient is and then it just also so happens to be filling in in the middle and so we can actually come here and take this border width and this border style off from here and like magic it fixes the problem and i did say that i promised we'd be going down to one single line instead of having it set up like this so to be able to do that we can take the fill one off from here remove the border image slice bring this border image source down to just being the border image shorthand and we can add the fill one to the beginning here or if you'd prefer you can actually add it to the end as well it's like the good shorthands where the order is a little bit less important though for a few other things with border image shorthand there the order can be important but if this is all you're doing you're off and running so again it's i define my gradient and then after i've defined the gradient there we just use the fill one or you can put the fill one at the beginning either one of those is going to work now right now it's not super readable so we can actually come where we have both of these 0.3s, maybe darken it up with a 0.6, just to play around with the opacity or the darkness on these a little bit, whatever it is, making it a lot easier to read, which is exactly what we want. Once again, if you are interested, don't forget about my course, CSS Demystified. It is right here, or there is a link in the description.
And with that, I would really like to thank my enablers of awesome, who are Philip, Andrew, Simon, and Tim, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.