The background size cover feature is not functioning properly on mobile devices, especially on longer pages

In my Next.js project, I am encountering an issue with the background image not displaying on longer pages when viewed on a Google Pixel 3a device. Here is how it looks on shorter pages that do not exceed the viewport height: https://i.sstatic.net/jJBTy.png

However, on longer pages that require scrolling to reach the bottom, the background image does not display at all: https://i.sstatic.net/e30co.png

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

Changing the background-size property to 'auto' allows the image to be displayed on every page, but I prefer it to be set to 'cover'. I may not fully understand how 'cover' works for pages that require scrolling, but I want the background image to remain fixed as shown in the first image. When the content extends beyond the viewport, I want the content to scroll while keeping the background image static. Any assistance on this matter would be greatly appreciated. Thank you.

javascriptcssreactjsnext.js

Answer №1

If my understanding is correct, you are looking to have the background image fill at least the viewport height. If the body's height exceeds that, you want the background to cover the entire body.

To achieve this, set the min-height of the body to 100vh without specifying an actual height so it adjusts based on content.

In the code snippet below, I've centered a single copy of the background image using the `cover` size property (which may crop based on aspect ratios). I've included a dummy div for scrolling purposes.

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for utilizing jQuery to identify an image that is being hovered on?

Concept My goal is to create an effect where a user hovers over an image and a transparent overlay div appears on top of it. This overlay div starts with a height of 0px and should increase to half of the image height upon hover. The hover functionality ...

javascriptjqueryhtmlcss

Why does JSON.parse obscure objects in response body when using Node.js?

Whenever I utilize JSON.parse and output some fetched information with the require module, nested objects are shown as [Object]. For example, consider the following code (currently using Node version 10.15): const request = require("request"); const ur ...

javascriptnode.jsjson

Deactivate the button for each package based on a specific PHP value

Are you looking to purchase a package or multiple packages? The available packages are displayed in the table below. I would like to implement a feature where once a user buys a package, the corresponding button for that package is disabled. Here is my cu ...

javascriptphphtmlbootstrap-4

Element widths are displaying uneven alignment

I can't seem to wrap my head around what's happening here. I've got an HTML layout with a header, sidebar, and central content page. Both the sidebar and central content are within the same div acting as a clearfix. I floated the sidebar le ...

htmlcsscss-floatwidthclearfix

Leveraging personalized design elements from a theme in Material UI without the need for makeStyles

Is there a way to access the theme.customElements.actionButton in MyComponent without relying on makeStyles? For instance, can I directly use className={theme.customElements.actionButton}? theme.js const theme = createMuiTheme({ customElements: { ...

javascriptmaterial-uithemesformik-material-ui

Creating a jsp page content with jquery and retrieving request parameters

I am facing an issue with my JSP page where I need to pass the value of request.getParameter("cfgname") to another content page so that it loads correctly. Currently, the code is displaying null instead of the parameter. This is the main JSP page with par ...

javascriptjqueryajax

Building a dynamic map with React components using an array

Using the passed ID, a new element is dynamically generated: const Icon: FC<IconPropsI> = ({iconId, ...rest}) => { const iconsMap: IconsMapT = { IconUser: IconUser, IconTime: IconTime, IconVideo: IconVideo } return createElement ...

javascriptreactjs

Issue with loading CSS and JavaScript following a GET request

I initially used express and the render function to display different pages on my website. However, I've now decided to switch to vanilla JavaScript instead. The objective is to load the HTML file along with all the necessary JS and CSS files. Below i ...

javascripthtmlcssnode.jshttp

What is the best method to choose a random color for the background when a button is pressed?

Does anyone know how to create a button that changes the background color of a webpage each time it is clicked? I've been having trouble with the javascript function in my code. I've tried multiple solutions but nothing seems to work. Could someo ...

javascripthtmlcss

The system encountered an issue trying to access property 'prepareStyles' of an undefined attribute

When I click the button, I am trying to trigger a dialog box to open. However, the dialog is not opening and an error message is displayed: Uncaught TypeError: Cannot read property 'prepareStyles' of undefined. Below is the code for my Compo ...

reactjsdialogcomponentsmaterial-ui

Local Storage State Persistence Issue with React Checkbox Component

I am currently working on a React component that features a checkbox. My goal is to have the checkbox toggle between on and off states and save this state in local storage so that even when navigating to another page, the toggle will remain in its previous ...

javascriptreactjslocal-storagestatereact-component

Display line numbers in HTML/CSS cellsorIncor

Attempting to include row numbers in HTML/CSS. Below is the HTML code with React populating the rows: <table className="table table-striped"> <thead> <tr> {/*<th>ID</th>*/} ...

htmlcssreactjs

The preventDefault function fails to work in Firefox

My input is called shop_cat_edit and I've included the following code. However, it seems to work fine in IE but doesn't work in FireFox. Can anyone help me figure out what's wrong? $('[name=shop_cat_edit]').on('click',fu ...

javascriptjqueryhtml

Ways to troubleshoot the MudTabPanel during scrolling

I am trying to create a fixed text at the top of a scrollable MudTab. As I scroll down, I want the text to remain visible. Here is an example of what I have done: <MudTabs Position="Position.Top" PanelClass="pt-2" Style="hei ...

c#htmlcssblazormudblazor

Nuxt js - Components are replicated on SSR pages

I have created a static page containing various components. When I navigate to this page from another page, everything displays correctly. However, when I directly land on the page, some components are duplicated and rendered again after the footer. Upon i ...

javascriptvue.jsnuxt.js

The result of the $.post() request is back

In my current code, I am using a jQuery $.post function like this: $.post('/test', json_data, function(data) { result = data }); This function is being used in a validation process where the return value (data) contains either true or false ...

javascriptjqueryajaxpostreturn-value

Any solutions for dealing with longer labels in Bootstrap form-floating?

Is there a way to use Bootstrap's form-floating feature with longer labels so that the text box automatically expands to accommodate the text but doesn't cut off on white-space wrap when too long? I'd like to avoid using position-relative to ...

htmlcssbootstrap-5

Transform the array within a callback function

Seeking assistance: I am grappling with the challenge of constructing an array of results within a loop of MySQL results. The ultimate goal is to populate an array with normalized objects derived from raw data. Any guidance would be greatly appreciated! ...

javascriptnode.jsexpress

Set the CSS/HTML to make two child elements occupy 50% of the height of the parent container div

This task seems deceptively simple, yet I am struggling to find a straightforward solution. Language: (HTML) <div class="col-6-12 subcontent-outer"> <div class="subcontent"> <h1>Header</h1> ...

htmlcss

Using boolean values as react-element component props is a requirement when dealing with material-ui list items

I'm fairly new to React and my question might sound a bit basic... I have a material-ui list-item component, and I want to show an edit icon only for the owner of the content. Here's an example: var rightAction = (this.props.canEdit)?<Ico ...

reactjsmaterial-ui