How to make picture background fit

Hello, so i am doing a little codepin project just for fun. How can I make the picture i have chosen for the background fit correctly? Every picture i choose, stretches, or looks weird and blurry. Is there a fix to this?

Please post the link for the project or provide some code showing what you have already.

FTR I have only been doing this a little over a month so there are probably tons of mistakes, but i have seen my HTML get a lot better from doing stuff like this on codepen.

It depends on what you’re trying to do, how you want it to look?

If you look at your image you’ll see its really small, which means it isn’t a good fit for a body background, unless you want it to repeat, for example, if you remove the background-size: 100% 100%;, it will repeat itself over and over again without looking blurry.

Yeah it took me awhile to figure out how to stop it from doing the repetitive thing but i got it to do the one image like i wanted, now the blurry problem is all i have.


If you want your image to cover the entire body, you should use cover for the background-size property:

body {
    background-image: url(...);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;

You can also try contain to see how that works.

1 Like

Hey man, you can use background-size :cover; to make your background fit! Also, I think the problem with your background image is that it is too small, so when the browser has to scale it to fit the viewport, it will distort the image which results in the blur and stretch. Try finding images with larger width and height and check if that works for you :smile:

I was about to go and post the below
in a thread that had the same issue-- until I realized it was the same person who posted this and the other thread talking about the same issue…

background-size: cover;

Thank you very much, this is a lifesaver!

1 Like