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

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

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

50% 1

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

Хобби

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

21 май 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

@dejihassan5573 Год назад

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!

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

@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 RU-vidr 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

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

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

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

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

@codegen2.O Год назад

Short, simple and to the point. Thanks!

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

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

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

thank you!! everything is sooo clear, love ya

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

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

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

@boriztsuyoshi9480 Год назад

Thank you i was searching for this syntax for like forever

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

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

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

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

@onyegbulegodson168 Год назад

Thank you man This took me hours to figure out

@feality8697 Год назад

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

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

absolutely!

@fedeb2241 Год назад

Just what i was looking for, thanks!

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

Thanks, mate! This helped a lot, cheers

@dicksontindi3186 Год назад

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

@Chiby Год назад

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

@anniemeenie Год назад

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

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

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

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

Awesome, thank you! 👍

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

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

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

Thanks! very well explained :)

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

Wow Awesome! Thanks a bunch!

@redigirma Год назад

loved it, thanks!

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

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

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

@bahauddinchishte Год назад

This saves my day, Thanks a lot!

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

Great stuff. Thanks.

@criptodude1873 Год назад

Helped me out a lot. Thanks buddy.

@MattiBoustedt Год назад

Thank you! Saved me!

@mikson6905 Год назад

Thank you mister Cem Eygi, you saved my life

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

Worked for me, thanks a lot!

@krishnabhat9307 Год назад

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

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

thankyou so much mate:) it work

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

I have a question about it. When you went to mobile size, the image was showing just half. how to avoid it? like have it appear the same irrespective of whatever size the screen is?

@strycinek Год назад

Thanks man. It was very helpful

@baryalaiahmad2568 Год назад

Best way of teaching,thanks.

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

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

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

Ur the best dude keep it up👍

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

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

@filmbricks-stopmotion Год назад

Tysm, this helped me so much more my project.

@rahatshahid10 Год назад

Thank you. It helped me a lot 😀

@vkmuffins Год назад

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

@jeremyickes5699 Год назад

Thank you. This helped me a lot

@veyselaksoy3470 Год назад

Thank you. your English is so clear

@FrannKavila Год назад

Thank you. Is it necessary to put the width and height first? Why not go directly to?: background-size: cover; background-repeat: no-repeat; height: 100vh;?

@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

@themichael8767 Год назад

Thank You very much, Sir!)

@VIKASSHARMA-le2cj Год назад

Thank you so much. It works very well..

@danielgiovannilombo3241 Год назад

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

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

You are a saviour!

@quantumworld854 Год назад

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

@Katianishat Год назад

Thanks.worked for me.!

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

I solved my problem from your video. thanks a lot

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

THANK YOU!!!

@matthewbarhou Год назад

How do I add text over the image? My h1 and p elements show text but they have a white background taking up the screen horizontally

@tejas6038 Год назад

Thanks a lot man.

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

wow you explained it so well

@STEV_- 2 месяца назад

thank you for the knowledge🙏🙏🙏

@joshuaola-oluwa7777 2 года назад

Thanks for explaining well but what if i want to put the image in the body tag

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

Thank you so much dear you solved my very big problem

@ronitbhatia1298 Год назад

Thank You for the tutorial...🙂

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

Good one, it helps. Thanks

@GH-ci2ze 4 часа назад

THANKS MAN A LOTTTT

@elgaucho956 Год назад

very usefull bro, thanks a lot

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

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

@user-tp9qi6cp1e Год назад

perfect lesson thank u sir

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

Excellent work

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

Thanks for the explication

@programmingworld5683 Год назад

Wonderful explanation

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

thanks sir you solved my problem thanks a lot.

@user-ms7dy1gm9m Год назад

thanku now i learn how to do

@mariomeza3514 Год назад

Thank you very much sir

@treazz6868 Год назад

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

@dxdworld3666 Год назад

thanks at this time

@mr.promit5418 2 года назад

very helpful,man

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

Thanks sir ..It helped me alot .

@dulanjananawarathne8834 Год назад

thax a lot brother

@Death_pubgmobile Год назад

Thank you bro 🙏

@Sabeeha441 4 месяца назад

Thank you sir 😊

@zuhaibulhassan. Год назад

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

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

Thank you 🙏

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

How can I insert a text on it and change the opcity of the background without affects the text?

@juanarpi163 Год назад

Thank you so much

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

Thankyou sir 👏👏

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

thanks very good work

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

thanks!

@all-rounder0777 Год назад

Thanks sir this is very useful video

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

thanku soo much

@codingwithshiku4735 Год назад

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

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

Thanks sir ❤

@n3xus112 Год назад

i have a question, if the user have a widescreen and i put a image with a inferior quality of that type of screen, is gonna give all screen and with the default quality of the image? (idk, maybe 1366x768 px) anyway? I know is resposive but this issue beat into my head.