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!

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

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

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

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

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

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

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

[@formigao2-y6y]

the way you teach is insanely good

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

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

[@parthkumarchaudhary]

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

[@Andreterragt]

Kevin, your videos are completely awesome!

[@codehal]

Great Video, you're amazing, Thanks sir❤

[@giorgimindiashvili3810]

u are really king of css thank u bro

[@mohammedbn703]

amazing! the possibilities with the pseudo after are endless

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

[@priyankanagulapally8523]

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

[@dimitrividigal923]

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

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

[@GGdevelopment]

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

[@LastNpcStanding]

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

[@rezarahman1782]

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

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

[@laranadesign4764]

Excellent as always

[@gilsonconceicao5201]

Thanks. Always a good content.

[@zachjensz]

Covid: CSS: *isolation: isolate;*

[@somildogra4645]

Thanks Man You helped me a lot ❤ From India

[@dziwnykamil]

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

[@kiravolvo]

mega thumbsup kevin. thank you

[@MaximilianoBernasconi]

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

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

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

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

[@tahminarasul5970]

Thank u very much, this video helped me.

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

[@NOTHING-yu3ry]

You're awesome bro

[@mohamedabass2736]

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

[@JohnBortins]

Outstanding!

[@horiafrincu9691]

very very very usefull! Thank youu!!!

[@elgunmhrrmov7672]

thank you so much

[@raghavsrivastava2016]

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

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

[@medaillek]

Thanks for the tip, really helpful

[@ishaqabdulfatahi9732]

This is awesome

[@sei_btz7271]

Bro you are beast

[@Gallowtown]

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

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

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

[@lakshyasrivastava6575]

great video

[@LeeWilson1973]

You legend!

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

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

[@sukhjindersingh7802]

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

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

[@ZazCodes]

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

[@wasimpatel2618]

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

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

[@nickveldkamp5396]

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

[@gaktau1579]

damn thats crazy

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

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

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

[@gonewild7386]

Do another video for Tailwind css

[@khaledsanny4817]

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

[@sanazj3232]

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

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

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

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

[@wasimpatel2618]

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

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

[@andeederek9338]

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

[@poooooow]

Funny, they could invent a property something like: "background-opacity"

[@andreas6508]

the simplest ways is to use backdrop-filter

[@arpd16]

The opposite of "isolate" is "wekindaearly"

[@vfxgenie983]

i love you xxxxxx

[@bluecafe509]

.myClass img { opacity: .9 }

[@user-ms8ei9le7x]

👽

[@Ashmughl6342]

i'm in love with u

[@graealex]

Still very hackish - and it gets quite annoying when you use multiple background images. I often combine one large image with a tiled noise texture. In these cases, it's usually simpler to make the noise texture an already transparent PNG. Same if you only want the background transparent, but the content solid. There's just a background-opacity attribute missing - and in consequence a background-filter.

[@KevinPowell]

Be fun if we did have that, but there are probably technical reasons why we don't. And while it's not perfect, using custom properties could control for multiple backgrounds as well, so once it's set up, it wouldn't be that bad afterwards. It's not perfect, but it can get the job done :)

[@Alex_Eicher]

What „Star Wars“ character describes youto most? 😂

[@--eightfourpm]

filter: opacity(10%) I think I didn't watch it yet

[@whatthefunction9140]

Is your name really kevin?

[@awh_solocactus]

buddy we can do it easily, just change the opacity of the image itself

[@vintprox]

Isolation! Where were you before, dear?

[@fatema8eee]

linear-gradient is the best solution for this. 🙂

[@hazemgamal4181]

thanks, I appreciate that 😍

[@MatthewWeiler1984]

Why not put the background image in the "::before" instead of "::after". Then you wouldn't need the "z-index" or the "isolation".

[@AJman14]

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

[@lukamuladze]

thanks bro

[@victorsaad59]

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

[@00SecretAgent]

@KevinPowell Extremely convoluted presentation, I followed, and copied every step, and it still did not work..!

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

[@michaelharings9913]

I just have an image in inkscape and export it with varying degrees of opacity til it's what I want.

[@zn3rgy1000]

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

[@i-am-artur]

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

[@kylevandeusen]

Custom properties are just so dang handy.

[@abnormal6376]

What about backdrop filter?