Lower the opacity of a background-image with CSS

We can play with the opacity of colors by changing the alpha value of them very easily, but with background-images, we’re a little more stuck with what we have… or are we?
⌚ Timestamps
00:00 - Introduction
00:38 - the first thing people usually try
1:32 - creating the pseudo-element
4:38 - putting the background-image on the pseudo-element
5:08 - making it more maintainable
#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 KZbin 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!

[@czerskip]

These are some of the most useful techniques used to tremendously simplify the implementation complexity, and allow designers to deliver artifacts that can be universally used in their various applications. Thanks for sharing!

[@ntq1ty]

I love your insights into abstraction in CSS. The custom variables for the background and then a reusable pseudo-element to apply it is genius and not something I'd have thought of before this video. Thanks!

[@dluca182]

I so desperately needed this I couldn't figure out from other written tutorials, but merging them with yours i finally got to have the style i was looking for my mockup Thanks!

[@jordanleenoche5043]

Wow, I never knew this. I always edited the picture itself by placing layers. This is far far easier since I can see the changes real-time. Kudos to you Kevin.

[@mokshnigamsatsangi1780]

The transition from the introduction to the coding section, that wave from left to right, was really cool !

[@ed1nh0]

I confess: I really forgot about that blessing "isolation" property! But, despite my poor gray slime inside my skull, it's a real handy solution! Thank you! 👏🏼👏🏼👏🏼👏🏼👏🏼

[@victorsaad59]

Amazing! Finally found someone who actually solved my problem, thanks Kevin! Cheers from Brazil!

[@tompupo]

This is literally the only explanation on the whole internet for this that does the trick and actually explains it too .. I was getting anxious already how to solve that .. thank you sir

[@codehal]

Great Video, you're amazing, Thanks sir❤

[@MidwestGomez]

I'll achieve a similar effect stacking translucent linear gradients *on top* of a bg image with one line of code. For example here's a red overlay over an image: background-image: linear-gradient(to top, rgba(200,0,0,.25), rgba(200,0,0,.25)), url('my-background-image.png');

[@keviincosmos]

I also do that, but the Keviin approach if you want the opacity is great 👏

[@paulbalafai5520]

thanks a lot

[@Andreterragt]

Kevin, your videos are completely awesome!

[@steinnhauser3599]

I was struggling with this literally like 2 days ago 😂 your content is on point

[@Incognito-kp9lk]

Kevin, you are a magician. I was all backend before now. But I recently started picking interest in CSS. Now, I get to appreciate your genius! Don't stop giving us these contents back-to-back. Thank you!

[@dziwnykamil]

Thank you Kevin! So many times I have stumbled across this problem

[@priyankanagulapally8523]

i was struggling with the issue since long. thank you so much.! very well explained.!

[@parthkumarchaudhary]

Nice one. That Isolation was nice. Learnt something new.

[@notanumber2]

the way you teach is insanely good

[@LastNpcStanding]

This works. Recommended to try this out. Thanks a lot for your help

[@lakshyasrivastava6575]

Thanks for the informative video kevin

[@onlywatchingbangtan]

The timing of this is too good! Just about tearing my hair out this afternoon

[@laranadesign4764]

Excellent as always

[@zn3rgy1000]

Why are you uploading this just now? I needed this last week! 🤣

[@mohammedbn703]

amazing! the possibilities with the pseudo after are endless

[@MaximilianoBernasconi]

Great as always, going now to the documentation to read about isolate, seems nice and complicated xD

[@BossPetta]

Great again Kevin, thanks a lot! 🤗♥

[@giorgimindiashvili3810]

u are really king of css thank u bro

[@abdulnafay72]

Hi Kevin, I was ran into similar problem while developing the design but instead of using background I have to use filter property with blur which was making whole div blur. Then I somehow figured out the solution and used the same technique and my problem was solved and I learned the advanced css from you that's why I was able to solve the problem.

[@jamescabreros5771]

it worked! thank you so much!!

[@rumbustious0]

Keep the good work!

[@kiravolvo]

mega thumbsup kevin. thank you

[@iancarr3923]

Excellent, thanks!

[@aaronlink127]

A different approach I used to use was to place a linear gradient above the image that has a low opacity (since you can stack different background images). This feels more elegant in some ways because no pseudo elements, but can sometimes feel a bit redundant to use a gradient to just specify 1 color.

[@red1io]

yes, I agree with you. and this is the css code: background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)), url("......");

[@imrulkayes5941]

@@red1io I was about to make this comment. Easier this way..

[@ck0024]

Yeah that's the best thing to do

[@erehr4623]

@@red1io And you can even include background repeat, position and size too all in one line. background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(' ') no-repeat center/cover;

[@medaillek]

Thanks for the tip, really helpful

[@tahminarasul5970]

Thank u very much, this video helped me.

[@dimitrividigal923]

Thank you man, you saved me, hi from Brazil 🇧🇷

[@JohnBortins]

Outstanding!

[@GGdevelopment]

Almost at 600k! I remember when you were in the 100's!

[@MrAnmoltiwari]

ok..a 7 minutes video and I learn 2 new css properties I didn't know about..mind blown!

[@horiafrincu9691]

very very very usefull! Thank youu!!!

[@hazemgamal4181]

thanks, I appreciate that 😍

[@AlexM86]

I was not aware that scoping was a thing in css too, that's awesome

[@CLeovison]

Hi kevin. Can you make a video on making a navigation bar with image logo and the nav's are icons. Thank youu kevin

[@KevinPowell]

I probably won't do another navbar video for a little while as I have several already, but I'll keep that in mind for the next time I do make one :)

[@CLeovison]

@@KevinPowell Thank you so much kevin ❤️

[@mahadevovnl]

I wish we could use data attributes more easily in CSS. Right now, it only seems to work with `content` in an before or after pseudo class. It would be great if you could have a and just use background-image: attr(data-bg); Who do we poke to make this a reality? :)

[@somildogra4645]

Thanks Man You helped me a lot ❤ From India

[@Julian-bv9pe]

Great video, I didn't know this other way to do it.. I achieve the same result with a lot of less code with linear-gradient

[@keviincosmos]

Love it 😍 👍

[@NOTHING-yu3ry]

You're awesome bro

[@Gallowtown]

i didnt know about inset and isolate, wow so cool, do you have a video about new css features?

[@AJman14]

If needed, you could control the image in the HTML by using inline styling for the custom property.

[@thangphan6047]

Thank you so much :)

[@user-ly3yn1fy1b]

thanks bro

[@zachjensz]

Covid: CSS: *isolation: isolate;*

[@ishaqabdulfatahi9732]

This is awesome

[@kylevandeusen]

Custom properties are just so dang handy.

[@sei_btz7271]

Bro you are beast

[@elgunmhrrmov7672]

thank you so much

[@fatema8eee]

linear-gradient is the best solution for this. 🙂

[@rezarahman1782]

Background-blend-mode can be another solution. I use it a lot.😅

[@GerritforBazeja]

That's nice tnx

[@MrHerbalite]

I solve this issue usually by using an inline SVG. Inline SVG ( and inline SVG only!) can be styled with CSS like the rest of the page. My use case for it usually are interactive, scalable image maps.

[@user-cc6vw5gu3x]

deserved follow

[@poderaccionsocialcolombia9847]

Hi Kevin, i am enjoying your proficiency a lot! Just a question: i am having hard time changing the opacity of a picture but a hovered area [areas from paths on svg file], and the opacity shall be applied when a referenced area in css is hovered only. I tried the .class1: hover .class2:not(:hover), where class 2 is a path of the whole picture. Any suggestions are deeply appreciated. Thanks a lot man 🥇

[@giorgiobellisario]

Thanks! Awesome as always! 😉 One little question: why did you actually use after pseudo-element instead of before? It's to display pink initially above all, something else or just a "random" choose? I'm asking you this because ::before elements represent an element "before" (background in this case) the actual one, while for me ::after could result a little confusing of the actual code behavior (reading only the selector)...

[@avneet12284]

you can use before too

[@fakefury1198]

It doesn't matter which one you pick if you're doing position:absolute

[@lakshyasrivastava6575]

great video

[@LeeWilson1973]

You legend!

[@roellemaire1979]

Can you make a video about blending images with gradients? Especially for the case of when the image is out of our control (like a cms) and has to be an image tag.

[@programmersohel]

I have applied in Tailwind like this: p-10 after:bg-no-repeat after:bg-right-top after:inset-0 after:opacity-30 after:-z-10 z-0 relative after:absolute after:bg-[url('link here')]

[@kufel92]

Browser support for backdrop-filter is almost there so next year I would wrap h1 and p with another div with "backdrop-filter: opacity(.5);" or "backdrop-filter: blur(20px);"

[@raghavsrivastava2016]

Finally!!! i found the solution.....thanks a lot

[@thedacian123]

When you setted the isolation context to div with background to absoluted postionatted child can 't under it's relative positionated parent even though its z index is -1 rigth?Is this the catch?Thanks!

[@ScriptRaccoon]

Awesome! I knew how to do this, but this solution with isolation: isolate is more elegant. But unfortunately I didn't really understand the explanation. Ok, it generates a new stacking context for our container, so that elemens don't get "outside", but why does this solve the issue? There is only one element on the site anyway.

[@marcelobrasil-developer8678]

Hi Kevin, I love your videos, it helps me a lot! Anyway, opacity did not work for me, but rgba did. I am using Chrome btw. Do you know why is that?

[@ntspl]

Can we do the same thing on the html tag and the body?

[@dave6012]

Not related: I was reading an article about position:fixed (ok, fine it was stack overflow 😉) where I learned how to make a fixed element relative to a parent element instead of the viewport by giving the parent element any transform value. For instance, scale(1). Fun hack, would be curious if Kevin or anybody else feels some type of way about that.

[@samsurrahmansaiel9103]

thansk a lot

[@mohamedabass2736]

we can use background: linear-gradient( rgba( ), rgba( ), url( " " ) )

[@sukhjindersingh7802]

Have you tried background-blend-mode: color ? It is the easiest way for me

[@Rocadamis]

I thought for sure you were just going to add a background blend mode, like screen, with whatever is the background color. It certainly would appear to be a lower opacity, right?

[@leoschuler]

great, what if you use the background image in the content attribute, would that change something? like: content:url(myimage.jpg); also, for a generic class, you could use an custom attribute to keep the image url and use content: url(attr(data-bg-image));

[@KevinPowell]

If I was going to use the `content` attribute, I'd just put the image in my HTML, since you're inserting the actual image into the DOM anyway, and then need to use positioning and a few other things to get it where you need to, and then you can also throw and alt on there, bring in lazy loading and a few other things as well.

[@mirandator]

I have a problem using this technique, the problem is with Modals in bootstrap, the item inside into the selector with the z-indez:-1 can't be showed correctly

[@vintprox]

Isolation! Where were you before, dear?

[@DarshanPatel-nx2nl]

can we do this similar thing by using multiple bg like background: rgba(0,0,0,0.5) url("Image"); background-blend-mode: overlay;

[@louiseknudsen8766]

Can you do this with several images close to each other? Tried this with images of letters and the last two letters moved from there place on the pages. What to do?? Help

[@johnlayda3299]

Have you ever tried a framework? Like React, Next, Vue or Nuxt?

[@KevinPowell]

Yup yup. I've done work with React, played with Vue, and am currently working on a couple of projects using Svelte. No real plans for content on any of them though. I'm *terrible* with React and don't particularly like it, and I'm far from an expert on any of them. Well, I am debating some Svelte stuff tbh, but not 100% sure on the channel at this point or not. Do be careful though, Next is a React framework, and Nuxt is a Vue framework.

[@nickveldkamp5396]

What is the difference of using inset 0 instead of width and height 100%?

[@gaktau1579]

damn thats crazy

[@zackgalyen8964]

For some reason, when I do this, "background-blend-mode" doesn't work. I can't get the image to interact with the background (in my case, a radial gradient). Please help!

[@realraven2000]

I always thought it would be good to overlay with a white div of less opacity... in the email world, I am always asked to do this to the body element.

[@realraven2000]

Here is what I came up with - no additional elements needed: body { position: relative; isolation: isolate; height: 100vw; } body::after { content: ""; inset: 0; z-index: -1; background: url("file:///E:/Dev/Mozilla/DEV/Menu On Top/assetts/Avatars/Chibi-Vayne.png"), rgba(255,255,255,0.3); background-repeat: no-repeat; opacity: 0.5; position: absolute; }

[@abnormal6376]

What about backdrop filter?

[@wasimpatel2618]

why it doesnt change anything using "after and before."?

[@amandeepsingh6581]

Can we achive the same with an image instead of a background image cause I'm building a react app where I'm getting some data from the server which has an img url And I'm not able take that dynamic url and place it in background-image: url() in my external css file so I'm left with only one option which is doing it with an img tag rather than doing it in with background-image

[@wasimpatel2618]

so, if i dont use "" in url ,it will not work?someone pls answer.

[@vfxgenie983]

i love you xxxxxx

[@gonewild7386]

Do another video for Tailwind css

[@ZazCodes]

Also try Background-color : anyone; Background-blend-mode : darken;

[@ZackPyle]

The other option was to make the background of your pseudo element white and just adjust that opacity. Not really "opacity" for the background image. But same visual result

[@roellemaire1979]

only if you have a white background, if there is any mixing of colors (or a gradient) this is the only solution

[@ZackPyle]

@@roellemaire1979 yup, for sure

[@sanazj3232]

You're amazing! Thank you so much!😀By the way can you help me find a simple project to start Javascipt PLEASE?

[@avneet12284]

Super nice but you don't need a pseudo element for this. You can just add a linear gradient on the background image right before the url part. That one line will eliminate the pseudo selector and custom properties.

[@andeederek9338]

Lol, I usually just lower opacity in some design software and reupload.

[@khaledsanny4817]

I put the background in ::after element and decrease it’s opacity