CSS issue: background taller than screen

Question

I'm making a website but I have a problem with the background. I use {background-size: cover;} to make my background fill the screen. But when the background image is taller than the screen, we can only see a small part of the image. I'd like to adjust the background to the screen: I don't want to see any blank but I want to see as much as possible of the image. I don't really know what to search and I can't find any answer to solve this. Is there anyone who can help me ?

In other words, I there are multiple backgrounds available. A random one is selected and displayed. So I'd like the background to fit the screen totally and lose the less of the image possible. With background-size cover, if the image selected is UHD for exemple, the background will be only the top-left pixels corresponding to the screen (1920x1080 for me). But I want it to fit the width or the height of the screen (be smaller, adaptive) to display almost the full image.

Here is the code in the CSS :

body {
    background: url('https://profuder.com/images/backgrounds/8.jpg');
    background-size: cover;
}

This image is large so I only see the top-left.

Thanks for the help.

Possible duplicate of [CSS Image size, how to fill, not stretch?](https://stackoverflow.com/questions/11757537/css-image-size-how-to-fill-not-stretch) — Daniel, Dec 23 '17 at 21:04
The `background-size: cover;` style does exactly what you are asking for. If you get a differend result, you have to show an example of code where it occurs. — Guffa, Dec 23 '17 at 21:10

score 0 · Accepted Answer · answered Dec 23 '17 at 23:42

I solved my issue.

I don't really know why but the JavaScript I used for finding a random background deleted the initial

background-size: cover;

in the CSS file.

So I just added

document.body.style.backgroundSize = "cover";

just after my code to apply a new random background

document.body.style.background = "url('" + randomImage + "') no-repeat 0 0";

Thanks for your help and sorry for the lack of code.

Regards,
Bastien.

CSS issue: background taller than screen

1 Answers1