 One of the questions I get asked the most often is how can I reduce the opacity of a background image? And that's exactly what we're going to be looking at in today's video. Hello my front-end friends and welcome back to the channel. If you're new here, my name is Kevin and here at my channel I'm here to help you fall madly deeply in love with CSS and I think one way that we can do that is to see how we can reduce the opacity of a background image. Now the easy answer here is to use something like Photoshop, Affinity or Figma to just alter the image to make it look the way you need it to. But if you need to do it with just some CSS there is a way to do it though it is not completely straightforward but let's dive in and see how we can do it. So here is an example of what we might run into where you have some text on a background image and it's hard to read that text and changing the color of the text doesn't actually help because we have different colors in there. I guess it's a little easier to read now but it's still not it's not the best thing or you have it it's looking good but when you resize whatever it is we need to reduce the opacity of it. Now the first thing people usually try is doing something like an opacity of 0.1 but then they realize that affects the div and the text that is inside that div so it doesn't quite work as intended and we can't really use that solution. So rather than doing that what we actually can do is to pull the image out and put it somewhere else in a way and we're going to see learn a few little CSS tricks here along the way and we're also going to make it a little bit easier as we go through and fix all of this up. So I have my low opacity bg image class here and what we're going to do is come in with the same class but I'm going to do it on an after and if we're using an after which is a pseudo element we do need the content property on here so we can throw that and in this case I need a position of absolute on it. Now because I am putting a position absolute here I don't want it to be relative to the entire viewport I want it to stay within my low opacity bg image so on here we're also going to come in and let's just come down to the bottom and here we'll do a position of relative and that will help us with you know prevent it from going where we don't want it to go. For now I'm going to give this a background of red just so we can actually that's with pink so it's not as aggressive um so we can actually see it and I need to give it a size now and for me the easiest way to do that now when you use position absolute is just to give this an inset of zero and inset is a shorthand for top bottom left and right it is relatively new but browser support for it is also very good at this point so as you can see it is now taking up the entire space that we want it to but we've run into this problem with it being in front of our content so the way to solve that is by giving this a zindex as well to push it to the back I could also do something that actually selects all of this content when pulls it forward but this is much easier so we already need the selector anyway so I'm going to do a zindex of minus one but the pink disappears and that's because it's actually going behind at this div and it would actually be it's going behind everything it's in like this it's just if you had other stuff on the page you're potentially losing it behind everything right now which we don't actually want I want that pink background to replace this background that we have right now so to be able to do that and prevent it from going behind if you've been watching me for a while hopefully you already know this answer because I talk about this a lot which is isolation of ice so late and when we do that how have we fixed our problem isolation isolate creates a new stacking context meaning that anything that is inside of here the zindex can't escape outside of it and in this case that's exactly what we want to do there are other ways of creating stacking contexts but this one is nice because it has no other side effects whereas a lot of the other things that do create stacking context that's not really their initial thing it's just a side effect of what it is like even if you put opacity at 99 you can also do a position relative you could also just give this its own zindex instead because we do have a position relative but isolation isolate the purpose is to create a stacking context so there we go and now really the magic has been done the hard stuff has been done what we could do is come here and I could say opacity of like 0.5 and we're controlling the opacity of that pink part so right away maybe this is actually more of what you want because the nice thing with this is you could put a brand color or something here instead of pink my text is becoming more readable you could do blend modes on this you could do all sorts of different things and maybe a gradient on this with a blend mode get some interesting effects going on and also have the bonus of actually making your text readable but that's not what we're here for you want to look at how to do this with a background image and we'll look at how we will have a lot of css here going on so we'll also look at how we can fix this up a little bit more but I'm actually going to take this background image off of here and we're going to come and place that background image over here instead and by doing that we now have a background image where I can control the opacity of it the only problem with this is while it's working it's a lot of code and it could be a little bit hard if somebody's coming in here to want to you know if they want to update it they're looking through trying to find and then eventually figure out it's on the sudo element but it's not super straightforward so there's a couple ways we could actually improve this a little bit one of them is I'm going to take the url from here it's a nice big long one I'm going to remove it from here and I'm actually going to remove the opacity from here as well and we can take this background color off too and what we'll do is we'll come up where we have this and let's delete all this stuff that we don't actually need and what I'd recommend doing when you have more complex code like this or like different pieces going on but ideally this is what's sort of controlling everything is we use some custom properties to do it so we can come here and say bg image and then we put the url then here we could say bg image opacity opacity and we could say it's like a 0.25 or something like that and so this selector is still what's controlling everything I don't need to look anywhere I can see it right in front of me and then down here we can set things up to use them so var bg image opacity and then here my var bg image and once again it's working so I never have to go and touch those things I just have to do this here change this it updates put it up to like a 95 whatever it is it just makes it a little bit more straightforward and easy to read when you're coming to modify things or change things and it even opens up the possibilities of this being something you reuse over and over but every div that you're using it on can have a different background image or a different opacity because you're just updating the custom properties for each one of those dibs and everything will just work and if you enjoyed this video and you'd like to see more quick css tips and tricks I have a little playlist that is right here for your viewing pleasure and with that I want to thank my enablers of awesome Jan, Johnny, Lucas, Mr. Dave, Patrick, Simon, Steven 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 point on the internet just a little bit more awesome