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

Answer 1

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%;
}

Answer 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 😕

Answer 3

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.

Answer 4

IK the issue with your code. Just add background-repeat: no-repeat; and background-size: 100% 100%

Answer 5

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 😊

Answer 6

Oh ok i see now thank you for all of your help and bearing with me here it is much appreciated

Answer 7

Ok thank you can you give me a quick example of what that would look like put together

Answer 8

Here's my failed attempt what did i do wrong lol
https://code.sololearn.com/W9T37HSL8vBW/?ref=app

Answer 9

Should i have put height and width in front of my background sizes?

Answer 10

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

Answer 11

Oh ok so you put HTML in the actual CSS to stretch the image all the way down the page?

Answer 12

Thanks Calvin I'll try it out