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

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

[@raves_r3177]

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]

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

[@worldlyjourney]

You are right. After watching this video, I decided to watch another video from a different KZbinr 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

[@LisekGG]

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

[@memylaptopandblitz7338]

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 😅

[@nataliestepp5916]

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

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

[@IeahIsHere]

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!

[@seandorig1955]

Thank me later! (I know is pissing when someone doesnt put the code in description so i made here just copy it :D ) { margin: 0; padding: 0; } .background-image { background-image: "source"; background-size: cover; background-repeat: no-repeat; width: 200px; height: 100vh; }

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

[@vkmuffins]

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

[@feality8697]

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

[@thebrainykids]

absolutely!

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

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

[@thebrainykids]

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

[@Memes4eva_4u]

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

[@francesshakinahtinarimas523]

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

[@smileplease9450]

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

[@kamalkishor8812]

@@smileplease9450 ya why not

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

[@abbosshodiev1699]

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

[@sonubhardwaj9284]

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

[@mikson6905]

Thank you mister Cem Eygi, you saved my life

[@mrssai2338]

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

[@cemeygimedia]

Awesome, thank you! 👍

[@treazz6868]

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

[@Filderson]

Thanks bro I have struggled for 2wks thanks 👍

[@codegen2.O]

Short, simple and to the point. Thanks!

[@onyegbulegodson168]

Thank you man This took me hours to figure out

[@boriztsuyoshi9480]

Thank you i was searching for this syntax for like forever

[@aquagamer352]

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

[@katta2116]

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?

[@kennedyjunior567]

SHORT AND CONCISE VIDEO.THANKS DO MORE VIDEOS

[@dandi2482]

thank you!! everything is sooo clear, love ya

[@fighter8931]

I solved my problem from your video. thanks a lot

[@krishnabhat9307]

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

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

[@fitzysbaby2677]

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

[@edikandesolution]

I have problem with video link . When I copied it and run . It refuse to work. I need your help

[@jayeshgaikwad3373]

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

[@veyselaksoy3470]

Thank you. your English is so clear

[@rome.u]

Very helpful. I needed this because when I add a background image it will stretch out and make the picture low quality and it's ugly to look at. Thnaks!

[@rome.u]

I finally figured it out. At first watching this vid it still doesnt fit. I put custom photo as background that I made on my phone. I found the problem was the size of it. Now I tried it again on another photo that I get on google and it fit. The photo was not blurred and is very responsive. Thanks again. I just watch this vid again just now.

[@SampaChileshe-ox1jh]

Wonderfull explanation 👏👏👏

[@anniemeenie]

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

[@baryalaiahmad2568]

Best way of teaching,thanks.

[@Crosbyte]

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

[@RK93838]

Thanks.your video is very helpful in my moment 😅

[@fedeb2241]

Just what i was looking for, thanks!

[@makechallengeseasy6225]

Thank you so much dear you solved my very big problem

[@gunturmaulana6956]

thankyou so much mate:) it work

[@filmbricks-stopmotion]

Tysm, this helped me so much more my project.

[@krrish7508]

Worked for me, thanks a lot!

[@bahauddinchishte]

This saves my day, Thanks a lot!

[@Duelweb]

This was a life saver!!! Thanks!! However, the image is not responsive ?

[@danielroach1019]

How do you make it so text actually goes on top of the image though, instead of below it.

[@silentt2143]

Instead of the div class, write the background-image, background-size, background-repeat, and height properties within your CSS body tag.

[@dawnstar24]

For hero image or likes, make a div, name it parent div, set it's position to relative, add any text tag and another div inside it which will contain our image. Set the image div to its maximum height and width which will be the size of the parent div and also make the position of image div to absolute, this way your text will be in middle. And you can align it using flex. Or set your text tag to absolute so you can use float or any property to set it's position. Though it's not responsive in this case so I don't really recommend it.

[@MattiBoustedt]

Thank you! Saved me!

[@criptodude1873]

Helped me out a lot. Thanks buddy.

[@sdmusiclive]

I am just learning to build websites. Your video was very insightful. I have downloaded Atom for html. Is this a good product?

[@daane996]

VPCE É UM DEUS!!! VOU LEMBRAR DE VOCE SEMPRE QUE FOR DORMIR, ORBIAGDA!!!

[@Andyiinho]

Thanks, mate! This helped a lot, cheers

[@STEV_-]

thank you for the knowledge🙏🙏🙏

[@rahatshahid10]

Thank you. It helped me a lot 😀

[@_Elrz]

When i put vh...image will not be display why please help me?

[@irinamihai8645]

what editor are you using?

[@joshuaola-oluwa7777]

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

[@Restin_J_face]

Does it matter if the style is defined within or ?

[@user-qb1sc3vx4e]

I usually write style in body section , but the most acceptable way is to write to special folder like main.css after that you should add the link to the html project

[@siegfriedcrypto]

Great stuff. Thanks.

[@kiranshinde03]

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

[@shubhransubiswal5182]

Ur the best dude keep it up👍

[@Mroggg]

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

[@jackmaddigan]

Thanks! very well explained :)

[@quantumworld854]

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

[@strycinek]

Thanks man. It was very helpful

[@user-qb1sc3vx4e]

You created a new div after that you wrote there , what about writing them in body section like body {}

[@Cocolemon-pk6on]

this didnt work for me idk why. how can you add this to a style sheet instead? It's like nothing happened. No image shows up at all. I already had some elements on my website done though.

[@redigirma]

loved it, thanks!

[@overdrive112]

already the first step with the link wont work for me

[@andrewdavidov5618]

Wow Awesome! Thanks a bunch!

[@VIKASSHARMA-le2cj]

Thank you so much. It works very well..

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

[@user-ms7dy1gm9m]

thanku now i learn how to do

[@indranilgoswami1500]

Thanks sir ..It helped me alot .

[@jeremyickes5699]

Thank you. This helped me a lot

[@ronitbhatia1298]

Thank You for the tutorial...🙂

[@rapify0]

this is useless, whats the point of adding a background image when we cant add anyother element on top of it

[@enryu9724]

Thanks for the explication

[@alan614]

Solid!

[@DinithG1008]

Thanks.worked for me.!

[@zuhaibulhassan.]

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

[@themichael8767]

Thank You very much, Sir!)

[@barcalona55]

wow you explained it so well

[@footballforever4511]

Thank you bro

[@footballforever4511]

You are best

[@all-rounder0777]

Thanks sir this is very useful video

[@iamyou6555]

You are a saviour!

[@GH-ci2ze]

THANKS MAN A LOTTTT

[@dxdworld3666]

thanks at this time

[@ballagaurav5370]

thanks sir you solved my problem thanks a lot.

[@kavishkahenderson5906]

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

[@mariomeza3514]

Thank you very much sir

[@elgunmhrrmov7672]

Çok teşekkür ederim Cem bey.

[@Islamic_Stress_Free]

I have placed Image on full background Now want to place text on bottom of Image and the text is displayed not in center but leaving too much space from left I cant fix it now I selected many attributes and different values what SHOULD I DO NEXT HELP ME🤥☹😭

[@japhethachimba174]

awesome Danke!!!!

[@user-tp9qi6cp1e]

perfect lesson thank u sir