Lower the opacity of a background-image with CSS

[@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!

[@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.

[@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!

[@mokshnigamsatsangi1780]

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

[@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

[@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

[@victorsaad59]

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

[@Andreterragt]

Kevin, your videos are completely awesome!

[@sovereignlivingsoul]

not sure if you've released an update to this sort of thing, but, i'm glad i have it in my list of favourites, i have a few places i might be able to utilize this code, i could probably learn more if i finished your CSS course, but so many good videos out there, more fun this way, thanks Kevin always a pleasure watching your videos, even when i have to do it repeatedly, take care and God Bless

[@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!

[@parthkumarchaudhary]

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

[@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

[@erehro]

@@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;

[@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! 👏🏼👏🏼👏🏼👏🏼👏🏼

[@hazemgamal4181]

thanks, I appreciate that 😍

[@formigaoesgotoclips]

the way you teach is insanely good

[@codehal]

Great Video, you're amazing, Thanks sir❤

[@onlywatchingbangtan]

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

[@priyankanagulapally8523]

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

[@steinnhauser3599]

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

[@zn3rgy1000]

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

[@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? :)

[@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 ❤️

[@MrAnmoltiwari]

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

[@AlexM86]

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

[@mohammedbn703]

amazing! the possibilities with the pseudo after are endless

[@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.

[@lakshyasrivastava6575]

Thanks for the informative video kevin

[@laranadesign4764]

Excellent as always

[@giorgimindiashvili3810]

u are really king of css thank u bro

[@BossPetta]

Great again Kevin, thanks a lot! 🤗♥

[@MaximilianoBernasconi]

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

[@dziwnykamil]

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

[@gilsonconceicao5201]

Thanks. Always a good content.

[@AJman14]

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

[@LastNpcStanding]

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

[@kylevandeusen]

Custom properties are just so dang handy.

[@Gallowtown]

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

[@rumbustious0]

Keep the good work!

[@dimitrividigal923]

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

[@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.

[@GGdevelopment]

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

[@i-am-artur]

thanks a lot the video, it helped me in my commercial project

[@zachjensz]

Covid: CSS: *isolation: isolate;*

[@kiravolvo]

mega thumbsup kevin. thank you

[@iancarr3923]

Excellent, thanks!

[@jamescabreros5771]

it worked! thank you so much!!

[@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

[@somildogra4645]

Thanks Man You helped me a lot ❤ From India

[@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);"

[@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.

[@rezarahman1782]

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

[@lukamuladze]

thanks bro

[@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.

[@sukhjindersingh7802]

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

[@NOTHING-yu3ry]

You're awesome bro

[@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

[@horiafrincu9691]

very very very usefull! Thank youu!!!

[@medaillek]

Thanks for the tip, really helpful

[@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?

[@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.

[@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.

[@tahminarasul5970]

Thank u very much, this video helped me.

[@JohnBortins]

Outstanding!

[@საბანიკაჭაძე]

deserved follow

[@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; }

[@fatema8eee]

linear-gradient is the best solution for this. 🙂

[@mohamedabass2736]

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

[@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

[@thangphan6047]

Thank you so much :)

[@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 🥇

[@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!

[@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;

[@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

[@keviincosmos]

Love it 😍 👍

[@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!

[@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

[@GerritforBazeja]

That's nice tnx

[@ishaqabdulfatahi9732]

This is awesome

[@sei_btz7271]

Bro you are beast

[@nickveldkamp5396]

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

[@elgunmhrrmov7672]

thank you so much

[@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')]

[@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?

[@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.

[@wasimpatel2618]

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

[@vintprox]

Isolation! Where were you before, dear?

[@ntspl]

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

[@abnormal6376]

What about backdrop filter?

[@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

[@rayskinner4289]

Wouldn't it be better to avoid the background-image entirety. Add the image html into the DOM and manipulate it with object-fit:cover? That way the background image will support lazy loading and the image can be changed without touching the css in the future?

[@KevinPowell]

Yeah, I've started doing stacking with `grid` a lot, and as you said, it opens up a lot of other good things. Probably should have mentioned that as well

[@raghavsrivastava2016]

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

[@lakshyasrivastava6575]

great video

[@wasimpatel2618]

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

[@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.

[@LeeWilson1973]

You legend!

[@gonewild7386]

Do another video for Tailwind css

[@sanazj3232]

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

[@Kanthon]

I've also got this question a lot but never understood the point. The image is in the background you can make it any opacity you want by just using a png or just save it with a color overlay. I mean it's in the background just make it the way you need it in photoshop.

[@samsurrahmansaiel9103]

thansk a lot