How to make a background-image transparent in CSS

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

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

50% 1

🔥 My course: Responsive Design for Beginners! coder-coder.com/responsive/
💻 Become a full-stack web dev with Zero to Mastery: academy.zerotomastery.io/a/af...
In this tutorial I'll show you how to make the background-image of a div semi-transparent by adjusting the opacity, without affecting the text in that same div!
Blog post: coder-coder.com/background-im...
________________________________________________
SUPPORT THE CHANNEL
⭐ Join channel members and get perks: / @thecodercoder
👏🏽 Hit the THANKS button in any video!
🎨 Get my VS Code theme: marketplace.visualstudio.com/...
WANT TO LEARN WEB DEV?
Check out my courses:
🌟 Responsive Design for Beginners: coder-coder.com/responsive/
🌟 Gulp for Beginners: coder-coder.com/gulp-course/
RECOMMENDATIONS
⌨ My keyboard-- get 10% off with code THECODERCODER -- vissles.com/?ref=mu96kxst5w
💻 Other gear -- www.amazon.com/shop/thecoderc...
📚 My Favorite Books -- coder-coder.com/best-web-deve...
📺 My Favorite Courses -- coder-coder.com/best-web-deve...
🔽 FOLLOW CODER CODER
Blog -- coder-coder.com/
Twitter -- / thecodercoder
Instagram -- / thecodercoder
#webdevelopment #coding #programming

Наука

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

21 май 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@rotimibest8530 3 года назад

Your videos are so cool and relaxing. Your setup feels warm and your approach to teaching is really calm. I always tend to at least open any of your videos and leave a like even if I don't plan on watching it at that time. Plan on consuming more of your content this year. Keep up the great work

@LabhamJain 4 года назад

One More Way! : change value in both * div{ background: linear-gradient( rgba(0,0,0,0.6), rgba(0,0,0,0.6) ) *,* url('background.jpg'); }

@lesssass4478 4 года назад

This code actually put an overlay on the background image.

@TheCoderCoder 4 года назад

That's a great solution! Looks almost identical to the semitransparent bg image 👍

@LabhamJain 4 года назад

+ *Change Opacity In Both Values

@lesssass4478 4 года назад

@@LabhamJain Can create beautiful gradient effect(with two colors) with that code.

@domikani 3 года назад

@Labham Jain saved me !

@vfxgenie983 Год назад

You are my life saver, just watched your 40 minute tutorial of html a fortnight ago, and now i'm OBSESSED!! with web design.

@tonybp 2 года назад

I just spent a couple of hours watching long videos that showed this technique but didn't explained the why's... you did it in under 3 minutes. You have a new subscriber.

@caglayancalskan8395 2 года назад

I've been looking for this for 2 days. ty so much ^^

@supunathukorala4084 3 года назад

one of the favorite channel for me. keep going. good luck!!

@patrickpaxton4858 4 года назад

This video was the very first time I got it right to make a semi transparent background, been looking for a way since 2 moths ago, very simplistic explanation, thanks a ton!!

@TheCoderCoder 4 года назад

Awesome! I'm so glad this helped you out :D

@swa2300 3 года назад

Very short, straight forward & informative...she understood Dom elements very well

@nat6106 3 года назад

You really nailed it: quick and precise! That's a rare thing!

@MrVanAnderson 4 года назад

This was really well produced! Also, been thinking of getting that Logitech keyboard.

@aldoalayz 3 года назад

So much thanks for this; it works responsively too if I have to scroll the page down the overlay also exists on the scrolled pages thank you!!

@lut4718 3 года назад

First time heard about this option, helped me to solve problem in my project, thanks so much for this video

@dereka6964 3 года назад

Thank you, this is what I was looking for

@kaustubhdeshpande4444 3 года назад

You are a savior! I couldn't find any solution to this problem by googling it. Finally, I tried RU-vid and found this video! Many thanks!

@slackergeek2007 4 года назад

I was just struggling with this tonight and then found this video. Thanks!

@krispe23 3 года назад

You are very helpful, you keep it simple and you explained it very well. I have been having trouble for the last few days with text being stuck underneath the background (I managed to change the opacity through pseudo-class, though). Now I know I had to put position of the text to "relative" to bring it front. z-index didn't work. So, big thanks from beginner girl coder :)

@MrVisheshsingh 4 года назад

😱I am gonna save this to my playlist to save hours of time searching over a bunch of StackOverflow issues. Thank you so much!

@TheCoderCoder 4 года назад

Awesome, glad this helped!!

@alexandrudorinelana7561 3 года назад

Amazing! thank you for the straight forward explaination!

@startedat2556 3 года назад

awesome content, girl! keep going for us

@codecrumbs 4 года назад

Great tutorial Jessica, that's how I do it too!

@rawisglenn 2 года назад

Hi @coder coder Thank you for the tutorial! Think that it has the clearest instructions and explanation among all the tutorial out there. Would like to check which HTML element you are referring to with the ".hero" class name. Separately, I would also like to check why you add a "&" to the ::before pseudo element.

@createdbyjulius6133 4 года назад

next-level editing :o

@TheCoderCoder 4 года назад

Thanks! This is all due to my husband :D

@LabhamJain 4 года назад

@@TheCoderCoder Huge Round Of Appluse For Your Husband...

@CB4TS 7 месяцев назад

THANK YOU JESS, THE POSITION RELATIVE TO THE TEXT SAVED MY LIFE!!!!!!!!!!!!

@TheCoderCoder 7 месяцев назад

Glad this helped you!

@Kilopillz 2 года назад

Explained very well in less than 3 minutes. Thank you😁

@renarfreitas 3 года назад

Very cool!! TKS for this tutorial!!

@tastes-like-straberries 3 года назад

Wow I faced the same problem yesterday and today this got recommended 😍😍

@licken1408 3 года назад

You can also decrease the brightness of the image. ex: filter: brightness(%);

@bernardkamsterdam1960 2 года назад

It worked, cool! Thank you cause I was strugling a lot..

@GarfieLD-Mami Год назад

This my today problem and finaly I catch up this video :) Thank you

@Youraverageprogrammer 2 года назад

It's a neat trick. Loved it.

@PeaceMatters5 3 года назад

Awesome!!!! Thanks for the tips:-D

@gindoprinandosinaga8109 2 года назад

one of the most expressive tutor that makes me easy to understand the message 😂🤣👍

@frankiefab 3 года назад

Thank you for this, it was helpful.

@satyajeetsahu5270 3 года назад

Finally someone explained this to me. 😌

@zecko9534 3 года назад

i had been struggling on this for ages

$@stefannyfracicabarboza8607$

@stefannyfracicabarboza8607 3 года назад

OMG i love you so much! thanks!

@aap-gamer8730 2 года назад

you latterly saved me. Thank you so much

@lucasjuan14 3 года назад

I loved, you saved me 😍😍

@amazonreviews2524 3 года назад

Extremely well made video.

@nikhildhakal3727 3 года назад

Damn I couldn't think of adding the image actually to the pseudo element when I was trying. Sometimes basic video like this helps. Thanks

@adriananin3150 Год назад

Very helpful thanks!

@Aceovhartz 3 года назад

This worked for me with after I removed the display: flex. Thanks.

@Igor-km5qp Год назад

Nice and short explanation, Thanks

@thehitler3126 3 года назад

excellent you explained well and it was easy to understand.

@tiefsoftwarelab 3 года назад

What A nice Tuto Thanks 👍 ;)

@drewbird87 4 года назад

Love that skit at the beginning!

@TheCoderCoder 4 года назад

Thanks so much! It was fun to make :D

@luckyvanilla388 3 года назад

Haha, watching it over and over again 🤣🤣

@AhmedHassan-cm3yn 2 года назад

Amazing! Thanks

@erandahasaranga4416 3 года назад

Really like your presentation style ✌️

@ken_sparks 3 года назад

This was awesome

@udayptp 3 года назад

I needed this video thanku

@truebangla5342 4 года назад

I realy love your tutorials.. Please make some tutorials on java programming

@mahyarbehzadi738 3 года назад

Thanks for this article 🤩🤩

@421prateek 3 года назад

u're a genius 🔥🔥🔥

@meowhyppy1992 3 года назад

Thanks, I need this :')

@luiscorado2868 3 года назад

Excellent, thank you. What theme do you have for your vsc? , those color are awesome

@sonoftroy8572 3 года назад

Hey I really like the quality of your videos! do you edit your own videos or do you hire someone to edit for you?

@otro.mentiroso 3 года назад

What a good video, greetings from Mexico

@themicroclonedev6905 3 года назад

hello Jessica Chan, you have a great quality display of video content on your channel! This is a very recommendation for learning programming, especially for me, btw what video editor do you use? whether using adobe premiere pro?

@triplmx0367 3 года назад

Thank you so much!

@acubesa 3 года назад

This is an underrated channel...

@techbhupi9398 3 года назад

Was helpful ..thanx😙

@pranavgoel29 4 года назад

Nice animations and helpful tips as always 😄

@TheCoderCoder 4 года назад

Thanks so much!

@sukhvindersingh6185 3 года назад

That's awesome 👍

@99phoenix 2 года назад

good session abnux! GG

@nerf66770 3 года назад

thank god, Now i have a woman code teacher in yt, great tutorial! love the editing♥😁

@oraogavran3115 3 года назад

ty great video

@fashizlecartman 3 года назад

You are my hero.

@biswajit_rout_369 2 года назад

Your editor looks awesome

@adilmohak 3 года назад

Love you!

@muhammadhusnain7971 3 года назад

its knowledge is useful thankx

@VezWay007 3 года назад

Having watched a lot of Kevin Powell tutorials before learning about Coder Coder, my first thought when she said separate the background-image to the text is "pseudoelements" 😂 I guess, I AM learning from these tutorials

@uttamrajput41 2 года назад

Thanks dude

@TinyMaths Год назад

That 'zombie' entrance was pretty impressive.

@willdymond9816 3 года назад

holy High quality tutorial batman

@sonamuhialdeen7866 2 года назад

This is very useful note

@EmadElSammad 3 года назад

That's a lot of code for such a simple task. Lower level developers have some work to do. Anyway it worked for me lol, thank you!

@TimKeeley 3 года назад

That is a lot of code to read some overlaying text. I just add a text shadow to the text and mess with the offset and spread and it acts as a text outline.

@PabloPicaso 3 года назад

@@TimKeeley this is necessary as a professional Front end developer. And it's not lot of code.

@createdbyjulius6133 4 года назад

This tutorial helped me out so much! Thank you so much for this! Also, are you planning to upload more frontendmentor live coding vids?? Those are really helpful too and I learn so much from them! :D

@TheCoderCoder 4 года назад

Thanks!! My most recent video is building a Frontend Mentor site! 😁 It's not live streamed b/c I'm trying to keep it a bit shorter and edited, but I will do a live stream again at some point!

@createdbyjulius6133 4 года назад

@@TheCoderCoder Haha okay! Excited for that! Thank you for what you do! :D

@azharsheik1 3 года назад

Ot great privilege to see you coding by non programming and non coder I wish i could have chosen right path

@kunited9 3 года назад

Nice video thanks

@ahmedas1752 3 года назад

amazing!!!!!!!

@moonlightcoding3064 2 года назад

You just saved my career 😂😂 tnxx very much.

@deviant_dj 3 года назад

Man gotta love this girls positivity on the comments section, Anyways nice video, i always wondered how to make a transparent background-image without having a div just for the background image itself hehe

@amirkakavand1019 3 года назад

Thanks for freeing me from my misery! I was struggling with my code -___- Why haven't they thought of this problem already?!

@hiteshmoorjani2259 3 года назад

Love from India ❤️

@gamingparadox7775 3 года назад

I am no web developer...but i opened the video to hear your voice...an alternative for headspace app's monk voice

@hiimmijk Год назад

Thanks :)

@MichaelBreeden 3 года назад

omg i was having an opacity calamity until this video!!!!1!

@windysunny8917 3 года назад

A very good teacher, high quality but low view counts, why? The reason maybe the contents is: these knowledges are very important, but also very basic & simple, I think too many of audiences already knows these basic web knowledges.