0
168
ViewsBackground size cover not working on longer pages on mobile
This is a Next.js project and the mobile being used here is google pixel 3a. I'm having a problem where on longer pages my background image will not display at all. Here is how it looks on pages where the height is not exceeding the viewport height
But on some longer pages where you need to scroll to reach the bottom, it doesn't display at all
body {
background-image: url("https://via.placeholder.com/500");
background-size: cover;
margin: 0;
padding-left: 5vw;
padding-right: 5vw;
height: 100vh;
min-height: 100%;
width: 90vw;
font-family: system-ui;
overflow-x: hidden;
font-size: 1.3rem;
}If I change background-size to auto then it will work on every page, but I would like cover. Maybe I don't understand how cover works for pages where scrolling is required, but I would like the background image displayed as it is in the first image, and if the content is longer than the view port, the content should just scroll across the image without the image moving. Any help is appreciated. Thanks.
1 answers
Answer question0
If I've understood correctly, you want the background image to at least fill the viewport but if the body is higher than that you want it to fill the whole body.
Therefore, tell it that the min-height of the body must be 100vh and don't set an actual height, let it work it out from the content.
I'm assuming in this snippet that you want just one copy of the background, centered and using size cover (so it may get cropped top/bottom or at the sides depending on relative aspect ratios).
A dummy div is put in the snippet to ensure we get scrolling.
body {
background-image: url("https://via.placeholder.com/500");
background-size: cover;
background-repeat: no-repeat no-repeat;
background-position: center center;
margin: 0;
padding-left: 5vw;
padding-right: 5vw;
min-height: 100vh;
width: 90vw;
font-family: system-ui;
overflow-x: hidden;
font-size: 1.3rem;
}
div {
height: 350vh;
}<div></div>