How to make a background-image transparent in CSS

Key Takeaways

when building a website you may want to put a background image on an HTML div that also contains text or other content and then you say to yourself wait no one's gonna be able to read that I'll just change the opacity of the background image and fix it but oh you can't change the opacity of the background image without also affecting the text or the child elements of that div but not to worry we'll go over why this is happening and give you a quick solution to your opacity calamity let's get into it first off unlike background colors which allow you to adjust the Alpha Channel to control opacity there isn't a CSS property that can control just the background images opacity so when you adjust the divs opacity you're setting a change that gets inherited to everything that's contained in that div so in this case that's the background image property and any text that the div contains in the instance of our text and background image we need to find a way to separate the background image from the parent that way you'll be able to affect the just the background image without touching the text so how does that work in the code well we can put the background image into what we call a pseudo element of the parent pseudo elements exist in CSS but you can't see them in the HTML markup so if we set the background image on the pseudo element and then change the opacity it'll only affect the image we just need to make sure to make it the same size as the parent you can do this by setting the pseudo elements position property to absolute we'll also set its top right bottom and left values to zero so it doesn't collapse and don't forget to set the parent to position relative to keep the child within its bounds if you don't set the position of the parent then the absolutely positioned child will fly up the page into the ether also as a pseudo element it needs to have its content property set to an empty string otherwise it won't show up on the page at all then for the text which we have in the h1 tag you will need to set it to position relative so that it'll be on top of the pseudo element with the background image this is because if you don't explicitly set the position property of a text element it'll be hidden underneath any elements that do have their position property set in the z-index layer stack if you want to know more about z-index and what that all means check out my other video on z-index and there you have it beautiful legible and ready for primetime for more in-depth article and an alternate solution check out my blog linked in the description below and as always thanks for watching and keep on coding you