How to Make Background Image Responsive in CSS

[@PabloOlmedo-e4z]

I was looking for this behavior like several days. Im glady amazed that you only need a regular image and a few native css classes. Thanks a lot, this tutorial needs a ton more likes and views.

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

[@Hortmann1]

hope it helps, this is the CSS showed in the video:
body {
margin: 0;
padding: 0;
background-image: url("your_image_url");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}

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

[@ricrendrer]

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

[@waatzdeveloper]

Great🥳👍

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

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

[@Savyasachi_arjun]

Very nice sir❤❤

[@hbtnt0]

Straight to the point, love it. Subbed!

[@waatzdeveloper]

Thanks

[@bautipiaggio]

Amazing tutorial my dude, just what i needed

[@jmg9509]

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

[@waatzdeveloper]

Great, thanks!

[@RizwanSiddiqui021]

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

[@alexasanchobetherestors9962]

Thank you, man! That's very helpful!

[@waatzdeveloper]

Your welcome

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

[@UnoUrong]

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

[@samantavianeyrubiogarcia5162]

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

[@waatzdeveloper]

Your welcome🥳👍

[@tem_vremenem_v_kanade]

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

[@khalilkhawaja4909]

You saved my life. Thank you.

[@waatzdeveloper]

Glad to hear it!

[@kikifaqih_]

thanks broooo!!!!!
love from indonesia

[@itzxander1767]

Really appreciate your video

[@axl.ai101]

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

[@Paulo280713]

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

[@cecilialorenzini9597]

thank u so much. You're a genius!

[@waatzdeveloper]

Thanks :)

[@camiloalonso3709]

Big pp brother!! Quick, effective, simple.

[@waatzdeveloper]

Thanks😊

[@abhishekak8597]

Thankyou sir 🙏
Make more videos

[@gilsonconceicao5201]

Very good. Thanks for share

[@waatzdeveloper]

Thanks :)

[@leodragonheart754]

Thanks alot!! fixed my problem =)

[@waatzdeveloper]

Your welcome 😊

[@ramirami1232]

thanks.. you hepled me by this tuto

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

[@brandonstevens5628]

awesome video! thanks :)

[@bartoszraczkowski241]

Wow thank you very very much !!!

[@rajeshs5601]

Working fine Thanks bro

[@sanketpotle1096]

Very useful 😊

[@juanddjaramillo]

Cool, thanks man!

[@paladinostore4295]

You save my life

[@gustavomartinsalves2729]

thanks man you helped-me a lot

[@sajibmollick4600]

Nice video 😊😊😊

[@waatzdeveloper]

Thanks :)

[@Ravinder1561]

Thank you so much ❤

[@RalKrish]

very good presentation

[@XarnosShorts]

BRO UR SO GOOOD WTF THX

[@waatzdeveloper]

Thanks🙏

[@fus3RRR]

Guys everything is fine but evertime I refresh the page the sidebar is appear. What should I do the stop this?

[@sharonedwin1403]

Thank you! You're a life saver!

[@waatzdeveloper]

Your welcome

[@Imran_hasann]

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

[@aer0449]

OMG this helped me alot

[@isaiasjulio1]

Very helpful thank you!

[@michaelasante5002]

Thanks very much. I appreciate it

[@waatzdeveloper]

Your welcome🥳

[@MrTrendds]

Thank you so much 😩😩😩

[@waatzdeveloper]

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?

[@camiloalonso3709]

Just like that you got a sub here papi. Thnx

[@waatzdeveloper]

Thanks😊

[@08_dimasprasetyo9]

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

[@sharonedwin1403]

What if the picture loses it's clarity?

[@waatzdeveloper]

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

[@GeneralWinter9]

Thank you! You saved me!

[@jorabekmamataliyev8727]

Thank you very much

[@NatureDiaries4U]

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

[@GH_HeriS]

Very helpful

[@teodornicolau5536]

It worked thank you

[@waatzdeveloper]

Great 🥳

[@emiliano9793]

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

[@waatzdeveloper]

Your welcome 🥳

[@souvikhalder4050]

nice , it help me lot

[@SizweMoabi15]

I LOOOOVE YOU!!!!!! UGHHHHH

[@waatzdeveloper]

Thanks😊

[@constantine9074]

didnt work with unsplash image inserted via url

[@gamesforyou3094]

thank you so mush sir

[@KunalBobade-yt3bq]

how can i edit this in wordpress

[@rehmatdesigns9125]

thanks man !

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

[@subhamkhatiwada4986]

Can we make left and right not shrink?

[@NotKyleChicago]

What would you expect to happen instead?
I think that if you used a different value for background-position, you could have different parts of the image get hidden when the window is resized.

[@Singsongsxox]

Thank you 😀

[@waatzdeveloper]

Your welcome

[@codewithsehran]

thank you sir ❤

[@ccna3913]

How we can show complete image in mobile

[@Boy-tz6hf]

My picture is being crop from sides how to stop croping

[@haikalrandom4482]

Terimakasih bang,mama mu pasti bangga

[@ccna3913]

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

[@Thembiola]

Only a few realized that.

[@heinrichdapper2090]

Thank you!

[@waatzdeveloper]

Your welcome

[@alexanderhamming5139]

thanks broski

[@sandijunaedi1]

thanks man

[@waatzdeveloper]

Your welcome

[@JoanSantamariaHTTP]

Thanks a lot!!

[@Brocoli6898]

Thank you

[@waatzdeveloper]

Your welcome

[@aliaks1709]

Thanks

[@waatzdeveloper]

Your welcome😊

[@BroadLLC]

USEFULL ☼

[@hiimifranco2840]

Tank you very much

[@abdimelo3343]

you are soo fucking helpfull straight to the point
i love

[@bolastristes]

omg thank you :)🇦🇷

[@waatzdeveloper]

Your welcome 😊

[@muhammadsafvankv9394]

its did'nt work for me

[@bellaching8064]

TYSM

[@SK-vg3mw]

Still holding Shib ? 😃

[@waatzdeveloper]

Yes, I have some. Why?

[@sire906]

God bless you

[@4k1ra-f9y]

try the inspect element lol, its not center

[@Code_Crafted_Creations]

Helpful😀

[@waatzdeveloper]

🥳

[@nouf7437]

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

[@microwavedmac7907]

thank you so much!!

[@babitamohalik3448]

Thank you so much! 😊

[@ehelv]

thank you so much 🙏🏾

[@Daejang99]

THANKS YOU!

[@NileshPatil-si7dy]

thanks

[@muralivelayudam8079]

Thank you

[@leakleak795]

thank you