Lower the opacity of a background-image with CSS

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

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

deserved follow

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

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!

thanks, I appreciate that 😍

why not using background-blend-mode ?

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

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

Thanks Man
You helped me a lot
❤ From India

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.

the simplest ways is to use backdrop-filter

thank you so much

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

Kevin, your videos are completely awesome!

Thank u very much, this video helped me.

can we do this similar thing by using multiple bg like

background: rgba(0,0,0,0.5) url("Image");
background-blend-mode: overlay;

i love you xxxxxx

Do another video for Tailwind css

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

Excellent, thanks!

That's nice tnx

What about backdrop filter?

u are really king of css thank u bro

thansk a lot

very very very usefull! Thank youu!!!

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?

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 🥇

Great Video, you're amazing, Thanks sir❤

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

...

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.

Bro you are beast

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

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!

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

linear-gradient is the best solution for this. 🙂

Love it 😍 👍

amazing! the possibilities with the pseudo after are endless

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

it worked! thank you so much!!

i'm in love with u

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

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

Thanks for the informative video kevin

great video

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.

This is awesome

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