As I scroll past the top or bottom of the page, the body's background color transitions to a new shade

I am encountering an issue with my next.js app where the body background color is set to black. Here is the code in globals.css:

body {
  background-color: black;
  padding: 0;
  margin: 0;
  font-family: 'Titillium Web', sans-serif;
}

However, when I scroll down past the bottom of the page in the browser, this is what happens:
https://i.sstatic.net/rYQik.gif

The background turns purple (which is the background-color of my "Layout.tsx" inside the body).

In Chrome Developer Tools, this is how the body is displayed:
https://i.sstatic.net/WlKpL.jpg

And here is the layout-main loaded from "Layout.tsx" shown in Chrome Developer Tools:
https://i.sstatic.net/BwXiC.jpg

How can I make sure that the black body background extends throughout the entire background, even when I scroll down past the bottom?

cssnext.jsbackgroundbackground-color

Answer №1

Personally, I find success by assigning a background-color to the html element that matches the color value of the body element. In this scenario, it would look like this: 

html { background-color: black; }

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

Align the inner div in the center of the outer div, even when the outer div does not

I'm attempting to make sure the tail of the speechbubble aligns with the center of the image, regardless of their respective heights. Essentially, I want the image to always be centered within the current height of the wrapper, similar to how the spee ...

htmlcss

What is the best way to ensure a consistent spacing between two flex items?

I am working on a project to enhance my knowledge by rebuilding Facebook. One of the new concepts I am learning is Flexbox. When you resize the login page of Facebook, you'll notice that the Navigation shrinks but the logo and login inputs remain sta ...

htmlcssflexbox

Issue with Next.js: Setting the width to 100vh prevents the height from being responsive on mobile devices

While I understand that using height: 100vh on mobile is generally discouraged for various reasons, I'm curious as to why height: 100vh paired with width: 100vh in Next.js doesn't produce the expected result. Instead of a full-height square, I en ...

cssnext.js

Incorporating a background image into a Material UI theme with CSS styling

When customizing a theme in material UI, one can adjust or override it using the function createMuiTheme. Below is the complete file where this process is carried out: import { createMuiTheme } from '@material-ui/core/styles'; import purple from ...

cssreactjsmaterial-uibackground-imagetypeerror

Displaying an image on a jsp page

In my current JSP, within the HTML section, I have the following: <select> <%if(size == 1)%> <option>None selected</option> <%if(size > 1)%> <option>1</option> </select> Additionally, I have this ima ...

htmlcssjsp

Check to see if a div element with an id that contains a numerical value has been

My HTML code contains X elements, each with an ID in the format: viewer_mX In this case, X is a number ranging from 1 to m (where m varies). I am looking to utilize JavaScript to retrieve the respective element's number X when a user clicks on one ...

javascriptjqueryhtmlcssajax

Looping through images using JQuery

I'm struggling with an image animation and can't quite figure out how to make it work. <div id="img_loop"> <img src="img/img1.jpg" alt="image1" /> <img src="img/img2.jpg" alt="image2" class="hidden" /> <img src="im ...

javascriptjqueryhtmlcss

Sliding a div out from the right using jQuery

I am attempting to create a sliding effect from the right on a div using jQuery. I have managed to accomplish part of it, but not exactly as I would like. You can view my code on this JSFiddle. While the div slides out smoothly, the text inside wraps when ...

jquerycss

Is there a way to adjust the height of one div based on the height of another div in Bootstrap?

I am experimenting with a Bootstrap example featuring a table in the left column and 4 columns in 2 rows in the right column. Check out the code below: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css ...

javascripthtmlcssbootstrap-4

A flashy Rickshawgraph with the ability to modify the background color of the top data series

I am facing a challenge in modifying the background color of the rickshawgraph widget in dashing based on the maximum value of the highest graph from the latest incoming data. While I have successfully implemented this feature for one series, I am struggli ...

csscoffeescriptrickshawdashing

Aligning vertical pills to the right using Bootstrap framework

Here is the relevant code snippet that I am working with: <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <scrip ...

htmlcsstwitter-bootstrapright-align

How to Specify the Format of an Image or URL in Next.js

When using the Next.js image component, it automatically selects the most suitable format for images (avif, webm, etc.) based on the accepted format types of the browser. However, in my situation, I specifically need avif for most images but jpeg for certa ...

next.jsnextjs-imageimage-optimization

What is the proper way to add comments within CSS code inline?

Can anyone provide instructions on how to comment an inline css property, such as height, in the following code snippet? <div style="width:100%; height:30%;"> Any help is appreciated. Thank you! ...

csscomments

Conceal information within a label

I am encountering an issue with a wordpress plugin and I am attempting to conceal (or alternatively, replace which would be fantastic) the terms "DD", "MM" and "YYYY" in the provided code: <div class="smFormInlineFormCont"> <div class="smInli ...

htmlcss

The request body is not defined within the Express controller

Currently facing an issue with my controller: when I use console.log(req), I can see all the content of the request body. However, when I try console.log(req.body), it returns as undefined. This problem arises while working on my Portfolio project with Nex ...

javascriptnode.jsmongodbexpressnext.js

Begin one lesson, end all others

Looking for help with my expandable list menu that I created using jQuery. Here is the code snippet: $("#menu ul li ul").hide(); $("#menu ul li").click(function() { $(this).find("ul").slideToggle(); }); You can view the fully functional menu on jsFi ...

jqueryhtmlcss

What could be the reason for turbo not showing up in my workflow after I have successfully installed it?

Every time I attempt to execute turbo run lint, an error message saying "turbo: command not found" pops up. It appears that the dev dependency was not installed properly in the previous step. Displayed below is the log output: This represents my workflow ...

next.jsgithub-actionsturborepo

The expected response from CSS3 animated images may not be fully realized

I've been working on this project with 4 images. While hovering over one image causes the others to change size as intended, I can't figure out why the ones on the left are not following the same pattern even though I have specified that they sho ...

htmlcsshovertransformscale

Tips for determining what elements are being updated in terms of style

I need assistance with modifying the functionality of a webpage's dropdown menu. Currently, it displays when the mouse hovers over it, but I want to change it to appear on click using my own JavaScript. Despite setting the onmouseout and onmouseover e ...

javascripthtmlcssicefaces

Enhancing React components with dynamic background colors for unique elements

I am encountering an issue while using a map in my code. Specifically, I want to set the background of a particular element within the map. The element I am referring to is "item .title". I aim for this element to have a background color like this: https:/ ...

javascriptcssreactjsreduxreact-redux