How to Make Background Image Responsive in CSS

How to easliy make your background-image responsive using CSS.
In this tutorial I use the code editor Visual Studio Code, but you can use any other of your choice.
Join Waatz Developer Discord server here: / discord
business inquiries: [e-mail]

[@funky6615]

Thanks a lot.. I have been searching for this from past 2days none of the tutorial helped me and finally your video solved my issue.. Thanks buddy.. You have gained a new subscriber🤩

[@waatzdeveloper]

Thanks😊👍

[@TejashKumar-sc5wi]

you are really capable and deserves more and more subscribers, your content is soo helpfull for me and my friends ok
carry on brother and
please put such type of content on your yt channel and this is sooo helpfull for us ,
and thanks for this video

[@waatzdeveloper]

Thanks😍

[@norvusordoseclorum]

This guy really deserves more subscribers. His content is excellent

[@waatzdeveloper]

Thanks🥳🙏

[@abhishekT700]

Brooooooooooooo
Thanks a lottttttt
I was messing my head up in this problem for like 2 days and thanks i came across ur channel.
U not only fixed my prb of having the white space but also did made the image move.
U earned a sub.
Have a nice day

[@abhishekak8597]

Thankyou sir 🙏
Make more videos

[@yonderwire]

give the viewer 2-3 secs to see the code, also turn off the help messages... but great video...

[@waatzdeveloper]

Thanks for the tip

[@satyamthassu1509]

You can pause the video like everyone else. It's very simple.

[@alexasanchobetherestors9962]

Thank you, man! That's very helpful!

[@waatzdeveloper]

Your welcome

[@tem_vremenem_v_kanade]

Very nice, just wish you added the markup to a public repo

[@RizwanSiddiqui021]

wow. So clearly and easily explained. Thanks a bunch 😊

[@hedgehogf98]

This video was super helpful, thank you so much! I'd watched so many tutorials on background images in css but nothing was working how I wanted it to until I came across this video. :D

[@rajeshs5601]

Working fine Thanks bro

[@jorabekmamataliyev8727]

Thank you very much

[@axl.ai101]

Your a legend, a life saver thank you
I subscribed oh

[@gamesforyou3094]

thank you so mush sir

[@microwavedmac7907]

thank you so much!!

[@UnoUrong]

Yep! I was missing the "position" line... Thanks!!!!

[@sunithab2704]

Thank you so much for this video. I have a doubt what should be the width and height of the image that is used in the hero section

[@L-231]

Straight to the point, love it. Subbed!

[@waatzdeveloper]

Thanks

[@paladinostore4295]

You save my life

[@ehelv]

thank you so much 🙏🏾

[@GeneralWinter9]

Thank you! You saved me!

[@camiloalonso3709]

Just like that you got a sub here papi. Thnx

[@waatzdeveloper]

Thanks😊

[@bautipiaggio]

Amazing tutorial my dude, just what i needed

[@cecilialorenzini9597]

thank u so much. You're a genius!

[@waatzdeveloper]

Thanks :)

[@Savyasachi_arjun]

Very nice sir❤❤

[@jmg9509]

ABSOLUTE LIFE SAVER! Thank you so much, i was almost driven insane, but you gave the cure

[@waatzdeveloper]

Great, thanks!

[@sanketpotle1096]

Very useful 😊

[@ricrendrer]

I looked everywhere for it and it was your video that helped me. Thank you!

[@waatzdeveloper]

Great🥳👍

[@sire906]

God bless you

[@Paulo280713]

Thanks a lot sir, made it super simple to understand :3

[@leodragonheart754]

Thanks alot!! fixed my problem =)

[@waatzdeveloper]

Your welcome 😊

[@GH_HeriS]

Very helpful

[@Imran_hasann]

Bro.. sometimes image doesn't showing without set height...why?

[@Daejang99]

THANKS YOU!

[@NatureDiaries4U]

But in mobile view we can't see the whole image , right side green trees are hiding

[@leakleak795]

thank you

[@ramirami1232]

thanks.. you hepled me by this tuto

[@NileshPatil-si7dy]

thanks

[@kikifaqih_]

thanks broooo!!!!!
love from indonesia

[@gilsonconceicao5201]

Very good. Thanks for share

[@waatzdeveloper]

Thanks :)

[@abdimelo3343]

you are soo fucking helpfull straight to the point
i love

[@nouf7437]

OMGGGG, thanks a lot sir!! it really helped me fixed my project!!!! 🫡

[@constantine9074]

didnt work with unsplash image inserted via url

[@bartoszraczkowski241]

Wow thank you very very much !!!

[@isaiasjulio1]

Very helpful thank you!

[@brandonstevens5628]

awesome video! thanks :)

[@itzxander1767]

Really appreciate your video

[@bellaching8064]

TYSM

[@subhamkhatiwada4986]

Can we make left and right not shrink?

[@juanddjaramillo]

Cool, thanks man!

[@Bulldog_skin]

Thanks for the videos.. I just found them and they are very good. Informative and right to the point. I am new to this all and appreciate your help. Subscribed!

[@samantavianeyrubiogarcia5162]

I really needed this. Thank you thank you thank you very much!!

[@waatzdeveloper]

Your welcome🥳👍

[@sharonedwin1403]

What if the picture loses it's clarity?

[@waatzdeveloper]

When does it lose clarity? How big is the image?

[@yuto-_6353]

try the inspect element lol, its not center

[@gustavomartinsalves2729]

thanks man you helped-me a lot

[@MrTrendds]

Thank you so much 😩😩😩

[@waatzdeveloper]

Welcome :)

[@aer0449]

OMG this helped me alot

[@Ravinder1561]

Thank you so much ❤

[@KunalBobade-yt3bq]

how can i edit this in wordpress

[@XarnosShorts]

BRO UR SO GOOOD WTF THX

[@waatzdeveloper]

Thanks🙏

[@SizweMoabi15]

I LOOOOVE YOU!!!!!! UGHHHHH

[@waatzdeveloper]

Thanks😊

[@sajibmollick4600]

Nice video 😊😊😊

[@waatzdeveloper]

Thanks :)

[@camiloalonso3709]

Big pp brother!! Quick, effective, simple.

[@waatzdeveloper]

Thanks😊

[@kathunivers]

thanks man

[@waatzdeveloper]

Your welcome

[@somesaykosm732]

in full sized browser window it´s always cutting of a piece from the top of the image. How can i fix that?

[@RalKrish]

very good presentation

[@babitamohalik3448]

Thank you so much! 😊

[@muhammadsafvankv9394]

its did'nt work for me

[@Code-CraftedCreations]

Helpful😀

[@waatzdeveloper]

🥳

[@rehmatdesigns9125]

thanks man !

[@khalilkhawaja4909]

You saved my life. Thank you.

[@waatzdeveloper]

Glad to hear it!

[@hiimifranco2840]

Tank you very much

[@codewithsehran]

thank you sir ❤

[@souvikhalder4050]

nice , it help me lot

[@michaelasante5002]

Thanks very much. I appreciate it

[@waatzdeveloper]

Your welcome🥳

[@aliaks1709]

Thanks

[@waatzdeveloper]

Your welcome😊

[@08_dimasprasetyo9]

Thankyou so much, it's work on my website 😃

[@alexanderhamming5139]

thanks broski

[@muralivelayudam8079]

Thank you

[@BroadLLC]

USEFULL ☼

[@Boy-tz6hf]

My picture is being crop from sides how to stop croping

[@ccna3913]

How we can show complete image in mobile

[@bolastristes]

omg thank you :)🇦🇷

[@waatzdeveloper]

Your welcome 😊

[@ccna3913]

When you reduce width of screen image is not show complete what the reason

[@Thembiola]

Only a few realized that.

[@teodornicolau5536]

It worked thank you

[@waatzdeveloper]

Great 🥳

[@haikalrandom4482]

Terimakasih bang,mama mu pasti bangga

[@Singsongsxox]

Thank you 😀

[@waatzdeveloper]

Your welcome

[@sharonedwin1403]

Thank you! You're a life saver!

[@waatzdeveloper]

Your welcome

[@Brocoli6898]

Thank you

[@waatzdeveloper]

Your welcome

[@JoanSantamariaHTTP]

Thanks a lot!!

[@heinrichdapper2090]

Thank you!

[@waatzdeveloper]

Your welcome

[@SK-vg3mw]

Still holding Shib ? 😃

[@waatzdeveloper]

Yes, I have some. Why?

[@emiliano9793]

Thank you very much Sir! Too much useful!!!

[@waatzdeveloper]

Your welcome 🥳