0

How do i make a background image on CSS into 1 giant photo and not multiple small photos?

28th Apr 2019, 2:57 PM
Anonymous Coder
Anonymous Coder - avatar
12 Réponses
+ 2
What is wrong with it? And yes - you have to put width and height into background size EDIT: Oh! Just dou5 a syntax error in your css. This is the corrected version html { height:100%; } body{ background-image:url("https://www.sololearn.com/avatars/4c7c4468-5d7e-4ffb-84fb-9102e9531637.jpg"); background-repeat:no-repeat; background-size:100% 100%; height:100%; }
28th Apr 2019, 3:24 PM
Seniru
Seniru - avatar
+ 2
Anonymous Coder answering for the previous comment, That could not be happened. I tested it and it stretched to the whole screen. Check if you have included the html selector also 😕
28th Apr 2019, 3:37 PM
Seniru
Seniru - avatar
+ 2
Anonymous Coder To make better undistorted background image, you should not use backgroung-size: 100% 100%, which stretches the image to full screen. You should use background-size: cover; instead or use background:url("https://www.sololearn.com/avatars/4c7c4468-5d7e-4ffb-84fb-9102e9531637.jpg") center center / contain no-repeat; would set the background image at the center of the full screen. Check out the code here https://code.sololearn.com/WUtNDrhNjC36/?ref=app And please note that you have put h1 tag in head tag, which should be in body tag. There's css syntax error on h1.center too.
28th Apr 2019, 4:25 PM
Calviղ
Calviղ - avatar
+ 1
IK the issue with your code. Just add background-repeat: no-repeat; and background-size: 100% 100%
28th Apr 2019, 3:00 PM
Seniru
Seniru - avatar
+ 1
Anonymous Coder wtbout trying it yourself? I'll help you if there were any problem with it or you have a doubt Thanks for understanding 😊
28th Apr 2019, 3:03 PM
Seniru
Seniru - avatar
+ 1
Oh ok i see now thank you for all of your help and bearing with me here it is much appreciated
28th Apr 2019, 3:32 PM
Anonymous Coder
Anonymous Coder - avatar
0
Ok thank you can you give me a quick example of what that would look like put together
28th Apr 2019, 3:01 PM
Anonymous Coder
Anonymous Coder - avatar
0
Here's my failed attempt what did i do wrong lol https://code.sololearn.com/W9T37HSL8vBW/?ref=app
28th Apr 2019, 3:12 PM
Anonymous Coder
Anonymous Coder - avatar
0
Should i have put height and width in front of my background sizes?
28th Apr 2019, 3:16 PM
Anonymous Coder
Anonymous Coder - avatar
0
Lol when i posted that my pic was just a thin line at the top of the page but what im trying to do is take up the whole page with that photo as well as have it centered
28th Apr 2019, 3:27 PM
Anonymous Coder
Anonymous Coder - avatar
0
Oh ok so you put HTML in the actual CSS to stretch the image all the way down the page?
28th Apr 2019, 3:40 PM
Anonymous Coder
Anonymous Coder - avatar
0
Thanks Calvin I'll try it out
28th Apr 2019, 5:40 PM
Anonymous Coder
Anonymous Coder - avatar