As I scroll, the background color of my body vanishes

Question

As I scroll, the background color of my body vanishes

Seeking assistance with a CSS issue. I have set the height property of my body to 100%, which works well when all content is visible on screen. However, when I need to scroll due to window size changes, the body color disappears and only the HTML background color remains visible. Does anyone have a solution to this problem?

html {
  background-color: #07ade0;
}

body {
  background-color: #7968ae;
  width: 900px;
  margin-left: auto;
  margin-right: auto;
  font: 20px verdana, "sans serif", tahoma;
}

html css vertical-scrolling document-body

Answer 1

Answer №1

If you have set your body to height: 100%, it will match the height of the window, which may not be ideal as longer pages could cut off the background, as you pointed out. Removing the height property should resolve this issue.

Another approach is to set height: 100% for both html and body, then create a container within the body. Transfer the styles from html to body, and the styles from body to the new container. This method is preferred over setting a pixel width on the body.

HTML

<body>
  <div id="container">Your valuable content goes here.</div>
</body>

CSS

html, body {
  height: 100%;
}
body {
  background: #07ade0;
}
#container {
  background: #7968ae;
  width: 900px;
  margin-left: auto;
  margin-right: auto;   
  font: 20px verdana, "sans serif", tahoma;
  overflow: hidden;
}

View the DEMO.

Answer 2

If you have set your body to height: 100%, it will match the height of the window, which may not be ideal as longer pages could cut off the background, as you pointed out. Removing the height property should resolve this issue.

Another approach is to set height: 100% for both html and body, then create a container within the body. Transfer the styles from html to body, and the styles from body to the new container. This method is preferred over setting a pixel width on the body.

HTML

<body>
  <div id="container">Your valuable content goes here.</div>
</body>

CSS

html, body {
  height: 100%;
}
body {
  background: #07ade0;
}
#container {
  background: #7968ae;
  width: 900px;
  margin-left: auto;
  margin-right: auto;   
  font: 20px verdana, "sans serif", tahoma;
  overflow: hidden;
}

View the DEMO.

Answer 3

Answer №2

If you switch height to min-height on your body element, it will ensure that the body element takes up 100% of the screen if the content is not enough to fill the entire page. Additionally, it will allow the body element to expand when the content exceeds the size of the browser window.

Answer 4

If you switch height to min-height on your body element, it will ensure that the body element takes up 100% of the screen if the content is not enough to fill the entire page. Additionally, it will allow the body element to expand when the content exceeds the size of the browser window.

Answer 5

Answer №3

The solution provided did not address the issue of a column being invisible when there is no content on the page.

In order to resolve this, I introduced a wrapper and applied display: table; which finally worked.

My approach ensures that the column has a background color even when there is no content present.

http://jsfiddle.net/h83gtmbc/6/

html, body {
    height: 100%;
}
body {
    background: #07ade0;
    padding: 0;
    margin: 0;
}

#wrapper {
height: 100%;  
}

#container {
    background: #7968ae;
    width: 900px;
    margin-left: auto;
    margin-right: auto; 
    font: 20px verdana, "sans serif", tahoma;
    
    overflow: hidden;
    height: 100%;
    display: table;
}

<div id="wrapper">
<div id="container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam malesuada lectus in ornare....;

Even if the contents are removed, the column will maintain its full-height appearance.

Answer 6

The solution provided did not address the issue of a column being invisible when there is no content on the page.

In order to resolve this, I introduced a wrapper and applied display: table; which finally worked.

My approach ensures that the column has a background color even when there is no content present.

http://jsfiddle.net/h83gtmbc/6/

html, body {
    height: 100%;
}
body {
    background: #07ade0;
    padding: 0;
    margin: 0;
}

#wrapper {
height: 100%;  
}

#container {
    background: #7968ae;
    width: 900px;
    margin-left: auto;
    margin-right: auto; 
    font: 20px verdana, "sans serif", tahoma;
    
    overflow: hidden;
    height: 100%;
    display: table;
}

<div id="wrapper">
<div id="container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam malesuada lectus in ornare....;

Even if the contents are removed, the column will maintain its full-height appearance.

Answer 7

Answer №4

It appears that there is a specific issue plaguing Mac computers when using Chrome as the browser. Interestingly, all other browsers do not seem to encounter this problem. My hypothesis is that it may be related to the window size, as during testing, adjusting the inspection window size briefly reveals the background color before it disappears again when the site is at full width.

While I'm not entirely certain if this is the optimal solution, you could try adding the following code snippet to the container or div causing the issue. This approach worked for me in resolving the problem:

.full_width {
position: relative;
}

Answer 8

It appears that there is a specific issue plaguing Mac computers when using Chrome as the browser. Interestingly, all other browsers do not seem to encounter this problem. My hypothesis is that it may be related to the window size, as during testing, adjusting the inspection window size briefly reveals the background color before it disappears again when the site is at full width.

While I'm not entirely certain if this is the optimal solution, you could try adding the following code snippet to the container or div causing the issue. This approach worked for me in resolving the problem:

.full_width {
position: relative;
}

As I scroll, the background color of my body vanishes

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The hyperlinks in the navigation bar are leading me to incorrect destinations

Implementing Update and Delete Features for Database Rows in Repeater

In order to show the responses underneath, we must first identify the parent comment

Is there a way to create a dropdown selection for font families with vue js?

Use either Jquery or CSS3 to hide a div if one of its inner divs is empty

My HTML files are not getting bundled by Webpack

Rearranging anchor tag order with the power of JQuery

Utilize a component's CSS styles by inheriting them and applying them to another component

Combining CSS sprite sheets with optimized HTTP requests makes for faster loading

Initiating an audio call exclusively via SimpleWebRTC

Can solid grid lines be shown using CSS instead of the default dashed grid lines?

What's preventing my link from opening?

The HTMLInputElemet type does not include a Property Rows

Tips for generating dynamic scope variables in AngularJS?

Converting a data type into a CSS format

Step-by-step guide for making a CSS triangle design that is compatible across different browsers

Having trouble integrating RGraph into my HTML page with AJAX

Ways to include a link/href in HTML using a global constants file

What fate befalls CSS rules left untouched?

Using AngularJS to bind events on key presses