Full Screen Background Image with HTML CSS | Responsive Full Page Background Image CSS

Рет қаралды 710,414

Күн бұрын

Learn how to make a Full-Screen Background Image with HTML and CSS. In this video, you're going to learn how to set a Responsive Full Page Background Image by using pure HTML & CSS.
Background Image Credit: unsplash.com/photos/DlkF4-dbCOU
More Free Images: unsplash.com
SECTIONS:
(00:00) - INTRO
(00:25) - Adding The Background Image & First Styling
(02:23) - The VH Unit & Viewport Explained
(04:10) - Adjusting Background to Full Screen
(04:53) - Removing White Space
(05:20) - Final Styling
#responsive #css #webdevelopment

Пікірлер: 269

@dejihassan5573 2 жыл бұрын

never seen a video so short,concise and straight to the point like this ever .Thank You!!

@bopatzable Жыл бұрын

fully agree. this video is really helpful.

@nataliestepp5916 Жыл бұрын

I've been struggling for 2 hours trying to research how to do this! Thank you so much for posting this!

@LisekGG 2 жыл бұрын

Pro tip: If you want the image to be centered vertically and horizontally add line: *background-position: center center;*

@memylaptopandblitz7338 2 жыл бұрын

cheers buddy thx 4 that

@jirehcruz196 Жыл бұрын

omg thank uuuu

@LisekGG Жыл бұрын

You're welcome :D

@codesaif8075 Жыл бұрын

thanks dude you saved me

@LisekGG Жыл бұрын

@@codesaif8075 Happy to help 😅

@raves_r3177 2 жыл бұрын

I dont usually leave a comment but I feel like I have to in this video because you have helped me a lot. I have a web design project due a few days from now but I have no idea how to do a full screen image. You sir, just saved my grade. Thank you very much for this video and for the patience of explaining what a "vh" is. Your quality of teaching and content is worth a million subs. Again, thank you very much. Subscribed.

@cemeygimedia 2 жыл бұрын

Glad I could help! Thank you for your nice thoughts 👍

@instagramworld8863 2 жыл бұрын

You are right. After watching this video, I decided to watch another video from a different KZfaqr to compare the. Explanation. But I came back to this account to watch all his videos. You explain things in a simple and meaningful way. It Is hard for me to leave a comment but today I did

@fellowRaven02 Жыл бұрын

Omg THANK YOU SO MUCH MAN! I have a project and the background image was irritating me 😭 you are a life saver, you earned a sub!

@Memes4eva_4u Жыл бұрын

the other vids had repeating background. THIS IS PERFECT! tysm!

@abbosshodiev1699 Жыл бұрын

Straight-to-the-point tutorial. Good job!

@codegen2.O Жыл бұрын

Short, simple and to the point. Thanks!

@clauclaudia6855 Жыл бұрын

Wowww, thanks a lot , I had around 5h watching videos and I didn't manage to change the size of the img, and with 5 min your video I manage to do it XD, great explanation!!

@Disciple1963 Жыл бұрын

As a non-native English speaker I'd like to point out your great English pronunciation and thanks a million for it! And also thanks a lot for extremily clear explanation of the subject! Like and subscribe!

@fitzysbaby2677 2 жыл бұрын

thanks, i was using a different method which didnt like extending the image height wise, this is perfect !

@dandi2482 2 жыл бұрын

thank you!! everything is sooo clear, love ya

@boriztsuyoshi9480 Жыл бұрын

Thank you i was searching for this syntax for like forever

@Andyiinho 2 жыл бұрын

Thanks, mate! This helped a lot, cheers

@anniemeenie Жыл бұрын

Thank you this was so concise and well explained!! You saved me so much time

@fedeb2241 2 жыл бұрын

Just what i was looking for, thanks!

@onyegbulegodson168 Жыл бұрын

Thank you man This took me hours to figure out

@ananyamitra8717 Жыл бұрын

I don't usually leave any comment but had to say this....thank you so much u made the perfect time saving straight to the point video ❤️

@Crosbyte 2 жыл бұрын

Yup, imma just say that you're awesome teacher. Keep it going, subscribed!

@feality8697 Жыл бұрын

This guy is the key! This is what I was looking for! straight to the point

@thebrainykids Жыл бұрын

absolutely!

@jackmaddigan 2 жыл бұрын

Thanks! very well explained :)

@JenniferPerez-no7ih Жыл бұрын

Hi cem, from London, I must said that i start doing a webite, and i was struggling to find out how to cover the full page of the background with an Img, and your video just fixed my problems!!! Thank you :)

@andrewdavidov5618 2 жыл бұрын

Wow Awesome! Thanks a bunch!

@Chiby Жыл бұрын

Thanks man you just solved a 3days problem for me under 5mins

@bahauddinchishte 2 жыл бұрын

This saves my day, Thanks a lot!

@mrssai2338 2 жыл бұрын

I liked the way you explained, esp. viewport part...Great!!! subscribed already!

@cemeygimedia 2 жыл бұрын

Awesome, thank you! 👍

@criptodude1873 2 жыл бұрын

Helped me out a lot. Thanks buddy.

@krishnabhat9307 Жыл бұрын

thanks man you saved me:) I have a major project presentation tomorrow thanks❤❤

@jayeshgaikwad3373 2 жыл бұрын

Thank you man .. Really needed that one... Please make more n more....

@baryalaiahmad2568 2 жыл бұрын

Best way of teaching,thanks.

@redigirma Жыл бұрын

loved it, thanks!

@siegfriedcrypto 2 жыл бұрын

Great stuff. Thanks.

@gunturmaulana6956 5 ай бұрын

thankyou so much mate:) it work

@strycinek Жыл бұрын

Thanks man. It was very helpful

@rahatshahid10 Жыл бұрын

Thank you. It helped me a lot 😀

@krrish7508 Жыл бұрын

Worked for me, thanks a lot!

@MattiBoustedt Жыл бұрын

Thank you! Saved me!

@kiranshinde03 2 жыл бұрын

A very big thank you sir...😍😊🙏

@jeremyickes5699 2 жыл бұрын

Thank you. This helped me a lot

@aquagamer352 3 ай бұрын

Thank you so much, i really hope this works, i have high hopes, anyways thanks for the tuto! nice explaination and everything!! :DDD

@francesshakinahtinarimas523 2 жыл бұрын

This help me a lot for my pt. Thank you so much for sharing this!

@smileplease9450 2 жыл бұрын

Hii My name is John from India Can we be friends ?

@kamalkishor8812 2 жыл бұрын

@@smileplease9450 ya why not

@thebrainykids Жыл бұрын

Exceptional Turkish accent. Lovely. Thanks for this !!!

@danielgiovannilombo3241 2 жыл бұрын

Nice tutorial bro👏👏👏..easy to understand..

@shubhransubiswal5182 2 жыл бұрын

Ur the best dude keep it up👍

@filmbricks-stopmotion Жыл бұрын

Tysm, this helped me so much more my project.

@barcalona55 2 жыл бұрын

wow you explained it so well

@themichael8767 Жыл бұрын

Thank You very much, Sir!)

@iamyou6555 2 жыл бұрын

You are a saviour!

@Filderson Ай бұрын

Thanks bro I have struggled for 2wks thanks 👍

@mariomsumi822 2 жыл бұрын

Good one, it helps. Thanks

@sonubhardwaj9284 Жыл бұрын

finally in this video i get that individually div tag has no height and width thank you.

@dicksontindi3186 2 жыл бұрын

mudala this is one of those wonderful and helpful tutorials online..iyi yeve mwachaya bigge..keep it up.

@user-tp9qi6cp1e 2 жыл бұрын

perfect lesson thank u sir

@mikson6905 Жыл бұрын

Thank you mister Cem Eygi, you saved my life

@VIKASSHARMA-le2cj Жыл бұрын

Thank you so much. It works very well..

@veyselaksoy3470 Жыл бұрын

Thank you. your English is so clear

@DinithG1008 Жыл бұрын

Thanks.worked for me.!

@kaida5484 2 жыл бұрын

THANK YOU!!!

@kavishkahenderson5906 2 жыл бұрын

thannks brother you help me to fix this thanks again ;)

@tejas6038 2 жыл бұрын

Thanks a lot man.

@ronitbhatia1298 Жыл бұрын

Thank You for the tutorial...🙂

@alizabatool1928 Жыл бұрын

i never understood from yt how to adjUst bgimg not even commented on someone channels but i make it easy sir THANK YOU SIR! LOTS OF BLESSINGS FOR YOY SIR FROM PAKISTAN !

@PatrickOnVFX 2 жыл бұрын

tysm

@makechallengeseasy6225 11 ай бұрын

Thank you so much dear you solved my very big problem

@quantumworld854 Жыл бұрын

great wee video - help me lots. thank you very much

@elgaucho956 2 жыл бұрын

very usefull bro, thanks a lot

@ballagaurav5370 2 жыл бұрын

thanks sir you solved my problem thanks a lot.

@GH-ci2ze Ай бұрын

THANKS MAN A LOTTTT

@vkmuffins Жыл бұрын

My head was about to burst until I found ur video 😖😖 Thanks thanks thanks a million times !!!!!!

@fighter8931 Жыл бұрын

I solved my problem from your video. thanks a lot

@STEV_- 4 ай бұрын

thank you for the knowledge🙏🙏🙏

@nishuchandola7938 3 ай бұрын

thanku soo much

@mariomeza3514 Жыл бұрын

Thank you very much sir

@abhaykumaryadav4783 2 жыл бұрын

Excellent work

@user-ms7dy1gm9m 2 жыл бұрын

thanku now i learn how to do

@mr.promit5418 2 жыл бұрын

very helpful,man

@codingwithshiku4735 2 жыл бұрын

Thank you so much sir it helped me ❤️❤️❤️

@programmingworld5683 Жыл бұрын

Wonderful explanation

@dulanjananawarathne8834 Жыл бұрын

thax a lot brother

@dxdworld3666 Жыл бұрын

thanks at this time

@enryu9724 7 ай бұрын

Thanks for the explication

@RK4831K4 8 күн бұрын

Thanks.your video is very helpful in my moment 😅

@alan614 Жыл бұрын

Solid!

@cool_coding 2 жыл бұрын

Thank you 🙏

@Death_pubgmobile Жыл бұрын

Thank you bro 🙏

@zuhaibulhassan. Жыл бұрын

Thank You so much man very helpful video 100% recommended video concise and straight to the point

@treazz6868 Жыл бұрын

Çok yardımcı oldun reis. Abimsin sevgiler...

@sharadmishra3279 2 жыл бұрын

Thankyou sir 👏👏

@juanarpi163 Жыл бұрын

Thank you so much

@indranilgoswami1500 6 ай бұрын

Thanks sir ..It helped me alot .

@elgunmhrrmov7672 Жыл бұрын

Çok teşekkür ederim Cem bey.

@basharatali1060 2 жыл бұрын

thanks very good work

@yjm511 Жыл бұрын

thank you bro

@japhethachimba174 Жыл бұрын

awesome Danke!!!!

@shortasdfghjkl Жыл бұрын

thank you so much

@SampaChileshe-ox1jh 13 күн бұрын

Wonderfull explanation 👏👏👏

@Sabeeha441 6 ай бұрын

Thank you sir 😊

@all-rounder0777 Жыл бұрын

Thanks sir this is very useful video

@Nain_9 2 жыл бұрын

thanks!

@ariescollection7242 2 жыл бұрын

That k you for the video