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.
You are right. After watching this video, I decided to watch another video from a different UA-camr 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
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!
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!!
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 !
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 :)
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?
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.
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; }
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.
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
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;?
never seen a video so short,concise and straight to the point like this ever .Thank You!!
fully agree. this video is really helpful.
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.
Glad I could help! Thank you for your nice thoughts 👍
You are right. After watching this video, I decided to watch another video from a different UA-camr 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
I've been struggling for 2 hours trying to research how to do this! Thank you so much for posting this!
Pro tip: If you want the image to be centered vertically and horizontally add line: *background-position: center center;*
cheers buddy thx 4 that
omg thank uuuu
You're welcome :D
thanks dude you saved me
@@codesaif8075 Happy to help 😅
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!
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!!
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!
Exceptional Turkish accent. Lovely. Thanks for this !!!
the other vids had repeating background. THIS IS PERFECT! tysm!
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 ❤️
This guy is the key! This is what I was looking for! straight to the point
absolutely!
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 !
Straight-to-the-point tutorial. Good job!
This help me a lot for my pt. Thank you so much for sharing this!
Hii
My name is John from India
Can we be friends ?
@@smileplease9450 ya why not
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 :)
Thank you mister Cem Eygi, you saved my life
Thanks man you just solved a 3days problem for me under 5mins
My head was about to burst until I found ur video 😖😖
Thanks thanks thanks a million times !!!!!!
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
finally in this video i get that individually div tag has no height and width thank you.
Wonderfull explanation 👏👏👏
Thank you man
This took me hours to figure out
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?
I liked the way you explained, esp. viewport part...Great!!! subscribed already!
Awesome, thank you! 👍
Thanks bro
I have struggled for 2wks thanks 👍
Thank you. your English is so clear
Thank you i was searching for this syntax for like forever
thank you for the knowledge🙏🙏🙏
thank you!! everything is sooo clear, love ya
I solved my problem from your video. thanks a lot
Çok yardımcı oldun reis. Abimsin sevgiler...
How do you make it so text actually goes on top of the image though, instead of below it.
Instead of the div class, write the background-image, background-size, background-repeat, and height properties within your CSS body tag.
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.
Thank you so much, i really hope this works, i have high hopes, anyways thanks for the tuto! nice explaination and everything!! :DDD
SHORT AND CONCISE VIDEO.THANKS DO MORE VIDEOS
thanks man you saved me:) I have a major project presentation tomorrow thanks❤❤
Worked for me, thanks a lot!
already the first step with the link wont work for me
Best way of teaching,thanks.
Thank you! Saved me!
i dont like to comment but this video really deservers the effort
Short, simple and to the point. Thanks!
When i put vh...image will not be display why please help me?
How can I insert a text on it and change the opcity of the background without affects the text?
Tysm, this helped me so much more my project.
This was really helpful
Thank you man .. Really needed that one... Please make more n more....
Ur the best dude keep it up👍
thankyou so much mate:)
it work
A very big thank you sir...😍😊🙏
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;
}
Take the width out please
Thank You very much, Sir!)
great job 👍
Thanks for explaining well but what if i want to put the image in the body tag
This saves my day, Thanks a lot!
Thank you so much dear you solved my very big problem
You created a new div after that you wrote there , what about writing them in body section like body {}
I have problem with video link . When I copied it and run . It refuse to work. I need your help
Thank You for the tutorial...🙂
thanks at this time
thanks, i was using a different method which didnt like extending the image height wise, this is perfect !
great wee video - help me lots. thank you very much
How would you put it behind text?
Just what i was looking for, thanks!
Thank You so much man very helpful video 100% recommended video concise and straight to the point
Thanks.worked for me.!
Thanks sir ..It helped me alot .
loved it, thanks!
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.
what icon and theme u use for vscode?
After doing all that can we add text over that background image??
Great stuff. Thanks.
Thanks man. It was very helpful
Wow Awesome! Thanks a bunch!
what editor are you using?
Thank you. It helped me a lot 😀
Does it matter if the style is defined within or ?
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
Thanks for the explication
Helped me out a lot. Thanks buddy.
Thank you so much❤
Thanks sir this is very useful video
thanku now i learn how to do
Yup, imma just say that you're awesome teacher. Keep it going, subscribed!
Thank you. This helped me a lot
Thank you so much sir it helped me ❤️❤️❤️
Thanks a lot man.
Thanks, mate! This helped a lot, cheers
You are a saviour!
Can u add the margin and padding in ur css file instead of ur html file?
very usefull bro, thanks a lot
When I uploaded a image in chrome page it's blur it's not clear so what can I do
How do I overlay text?
I already done it and its succesful but sir how can I put texts in it? I kept puting texts yet it don't
wow you explained it so well
Thank you so much.
Wonderful explanation
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;?
Thank you this was so concise and well explained!! You saved me so much time
what do you mean by save it?
perfect lesson thank u sir
Subscribed :)