Lower the opacity of a background-image with CSS

Подписаться 928 тыс.

Просмотров 68 тыс.

50% 1

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 RU-vid 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!

Опубликовано:

28 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 136

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

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

@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

@steinnhauser3599 Год назад

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

@priyankanagulapally8523 Год назад

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

@Andreterragt Год назад

Kevin, your videos are completely awesome!

@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

@MaximilianoBernasconi Год назад

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

@parthkumarchaudhary Год назад

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

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

@LastNpcStanding Год назад

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

@onlywatchingbangtan Год назад

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

@zn3rgy1000 Год назад

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

@mohammedbn703 Год назад

amazing! the possibilities with the pseudo after are endless

@lakshyasrivastava6575 Год назад

Thanks for the informative video kevin

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

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

@BossPetta Год назад

Great again Kevin, thanks a lot! 🤗♥

@codehal Год назад

Great Video, you're amazing, Thanks sir❤

@notanumber2 3 месяца назад

the way you teach is insanely good

@laranadesign4764 Год назад

Excellent as always

@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

@medaillek Год назад

Thanks for the tip, really helpful

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

@gilsonconceicao5201 14 дней назад

Thanks. Always a good content.

@giorgimindiashvili3810 Год назад

u are really king of css thank u bro

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

@iancarr3923 Год назад

Excellent, thanks!

@tahminarasul5970 Год назад

Thank u very much, this video helped me.

@rumbustious0 Год назад

Keep the good work!

@MrAnmoltiwari Год назад

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

@kiravolvo Год назад

mega thumbsup kevin. thank you

@AlexM86 Год назад

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

@AJman14 Год назад

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

@hazemgamal4181 11 месяцев назад

thanks, I appreciate that 😍

@i-am-artur 28 дней назад

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

@GGdevelopment Год назад

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

@horiafrincu9691 Год назад

very very very usefull! Thank youu!!!

@dimitrividigal923 Месяц назад

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

@thangphan6047 Год назад

Thank you so much :)

@JohnBortins Год назад

Outstanding!

@somildogra4645 Год назад

Thanks Man You helped me a lot ❤ From India

@Gallowtown Год назад

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

@elgunmhrrmov7672 Год назад

thank you so much

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

@NOTHING-yu3ry Год назад

You're awesome bro

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

@keviincosmos Год назад

Love it 😍 👍

@user-ly3yn1fy1b 4 месяца назад

thanks bro

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

@GerritforBazeja Год назад

That's nice tnx

@kylevandeusen Год назад

Custom properties are just so dang handy.

@user-cc6vw5gu3x 9 месяцев назад

deserved follow

@rezarahman1782 Год назад

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

@ishaqabdulfatahi9732 Год назад

This is awesome

@sei_btz7271 Год назад

Bro you are beast

@zachjensz Год назад

Covid: CSS: *isolation: isolate;*

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

@lakshyasrivastava6575 Год назад

great video

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

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

@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

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

@mirandator 5 месяцев назад

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

@ntspl Год назад

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

@louiseknudsen8766 10 месяцев назад

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

@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

@raghavsrivastava2016 9 месяцев назад

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

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

@LeeWilson1973 2 месяца назад

You legend!

@zackgalyen8964 10 месяцев назад

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!

@abnormal6376 Год назад

What about backdrop filter?

@nickveldkamp5396 Год назад

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

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

@wasimpatel2618 9 месяцев назад

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

@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 9 месяцев назад

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

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

@amandeepsingh6581 2 месяца назад

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

@fatema8eee Год назад

linear-gradient is the best solution for this. 🙂

@sukhjindersingh7802 Год назад

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

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

@programmersohel 5 месяцев назад

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

@mohamedabass2736 Год назад

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

@sanazj3232 Год назад

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

@gonewild7386 Год назад

Do another video for Tailwind css

@gaktau1579 5 месяцев назад

damn thats crazy

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

@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