Resolved: Resizable background-image in css body but avoid repeating

Question:

I am trying to add this image https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Coffee_and_Friends_(Unsplash).jpg/2560px-Coffee_and_Friends_(Unsplash).jpg as background-image for body selector.
Here’s my code

body {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Coffee_and_Friends_%28Unsplash%29.jpg/2560px-Coffee_and_Friends_%28Unsplash%29.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

it’s working fine but at certain size image started to repeat so I added background-repeat: no-repeat; in code.
Now in place of repeated image there is white space in window, How to fill this white space with single image ?

Answer:

Just add the background-position and background-attachment properties:

background-position will set the starting position of your background image
background-attachment (set to fixed) will prevent your background image from scrolling with the content of your page

body {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Coffee_and_Friends_%28Unsplash%29.jpg/2560px-Coffee_and_Friends_%28Unsplash%29.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

<body>
Some text

</body>

If you have better answer, please add a comment about this, thank you!

Resolved: Resizable background-image in css body but avoid repeating

Resolved: I am facing ERR_HTTP2_PROTOCOL_ERROR on my website

Resolved: TypeScript does not recognize properties when instantiating interface array

Resolved: How to make statement case insensitive when uploading a dta file with specified columns?

Leave A Reply