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.

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

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

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

[@thebrainykids]

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

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

[@S_K_Michael1]

Take the width out please

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

[@feality8697]

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

[@thebrainykids]

absolutely!

[@vkmuffins]

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

[@Memes4eva_4u]

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

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

[@leahlilyrose]

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!

[@abbosshodiev1699]

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

[@mikson6905]

Thank you mister Cem Eygi, you saved my life

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

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

[@SampaChileshe-ox1jh]

Wonderfull explanation 👏👏👏

[@sonubhardwaj9284]

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

[@Chiby]

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

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

[@overdrive112]

already the first step with the link wont work for me

[@ObaiAtaya-b1q]

i dont like to comment but this video really deservers the effort

[@mrssai2338]

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

[@cemeygimedia]

Awesome, thank you! 👍

[@kennedyjunior567]

SHORT AND CONCISE VIDEO.THANKS DO MORE VIDEOS

[@boriztsuyoshi9480]

Thank you i was searching for this syntax for like forever

[@veyselaksoy3470]

Thank you. your English is so clear

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

[@joshuaola-oluwa7777]

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

[@treazz6868]

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

[@Filderson]

Thanks bro I have struggled for 2wks thanks 👍

[@fighter8931]

I solved my problem from your video. thanks a lot

[@krrish7508]

Worked for me, thanks a lot!

[@dandi2482]

thank you!! everything is sooo clear, love ya

[@baryalaiahmad2568]

Best way of teaching,thanks.

[@MattiBoustedt]

Thank you! Saved me!

[@filmbricks-stopmotion]

Tysm, this helped me so much more my project.

[@OkekeFavour-g8q]

This was really helpful

[@STEV_-]

thank you for the knowledge🙏🙏🙏

[@jayeshgaikwad3373]

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

[@Restin_J_face]

Does it matter if the style is defined within or ?

[@DavranbekSabirbayev]

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

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

[@codegen2.O]

Short, simple and to the point. Thanks!

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

[@DavranbekSabirbayev]

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

[@shubhransubiswal5182]

Ur the best dude keep it up👍

[@bahauddinchishte]

This saves my day, Thanks a lot!

[@makechallengeseasy6225]

Thank you so much dear you solved my very big problem

[@Duelweb]

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

[@quantumworld854]

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

[@gunturmaulana6956]

thankyou so much mate:) it work

[@krishnabhat9307]

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

[@Mroggg]

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

[@fitzysbaby2677]

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

[@-atlas.crosx-553]

Hello, thanks for the nice helpful vid, I'm wondering if this is doable on mobile?

[@aquagamer352]

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

[@ronitbhatia1298]

Thank You for the tutorial...🙂

[@_Elrz]

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

[@irinamihai8645]

what editor are you using?

[@fedeb2241]

Just what i was looking for, thanks!

[@omara1091]

great job 👍

[@dxdworld3666]

thanks at this time

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

[@rmdsolotov7008]

Great video. But my picture dont display after using this process. Please help

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

[@swapnil72]

After doing all that can we add text over that background image??

[@indranilgoswami1500]

Thanks sir ..It helped me alot .

[@themichael8767]

Thank You very much, Sir!)

[@IAMHULKSUR]

Helped me out a lot. Thanks buddy.

[@redigirma]

loved it, thanks!

[@hardikawaamin7980]

what application do you use ? thanks for answering im trying to learn

[@zuhaibulhassan.]

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

[@strycinek]

Thanks man. It was very helpful

[@programmingworld5683]

Wonderful explanation

[@sdmusiclive]

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

[@andrewdavidov5618]

Wow Awesome! Thanks a bunch!

[@rahatshahid10]

Thank you. It helped me a lot 😀

[@DinithG1008]

Thanks.worked for me.!

[@all-rounder0777]

Thanks sir this is very useful video

[@barcalona55]

wow you explained it so well

[@anniemeenie]

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

[@kiranshinde03]

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

[@siegfriedcrypto]

Great stuff. Thanks.

[@elgaucho956]

very usefull bro, thanks a lot

[@jeremyickes5699]

Thank you. This helped me a lot

[@Ig_shadowF]

thanku now i learn how to do

[@Crosbyte]

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

[@daane996]

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

[@edikandesolution]

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

[@Andyiinho]

Thanks, mate! This helped a lot, cheers

[@enryu9724]

Thanks for the explication

[@arijkhan9173]

Can u add the margin and padding in ur css file instead of ur html file?

[@themanwithabeard6468]

I already done it and its succesful but sir how can I put texts in it? I kept puting texts yet it don't

[@lonelym4ge]

what icon and theme u use for vscode?

[@أكاديميةحمزة]

perfect lesson thank u sir

[@ballagaurav5370]

thanks sir you solved my problem thanks a lot.

[@finnleeofficial7663]

Can I ask a question What is the name of the software he codes in the video? Thanks so much

[@Electroses]

How would you put it behind text?

[@yvannacello9655]

Thank you so much❤