My body background color disappears when scrolling

Asked 19/2, 2013 at 17:11 Answered 4/9 at 20:48

Solved html css vertical-scrolling document-body

I hope someone can help. I've set my body height property to 100% which is fine when all the content is on the screen at one time. However when i need to scroll (when minimizing the window) the body color disappears, leaving just the color i set for the HTML background. Does anybody know a solution?

html {
  background-color: #07ade0;
}

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

Configurationism answered 19/2, 2013 at 17:11 Comment(2)

Please provide some markup and the css in question. According to your comments it seems you are experiencing an overflow problem. So Without knowing how your page is laid out there isn't really a way to help you. Maybe you have some floated or absolutely positioned content? – Afterdeck 19/2, 2013 at 17:24

Do you have a page we could look at? Should be pretty easy to diagnose from there. – Prefiguration 19/2, 2013 at 17:28

If your body is set to height: 100%, then it will be 100% of the window, which is not ideal since the background on longer pages will get cut off, as you mentioned. Take off the height property and you should be set.

You can also set height: 100% on both html, body and then create a container within your body. Then move your html styles to body, and your body styles to the new container.

This is preferred, since it is not generally considered best practice to set a pixel width on your body element.

HTML

<body>
  <div id="container">Your well-endowed 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;
}

See DEMO.

Jefferson answered 19/2, 2013 at 17:13 Comment(9)

When i do that the background color disappears entirely leaving just the HTML colour. Here's my code if that shows any errors: html { background: #07ade0; } body { background: #7968ae; width: 900px; margin-left: auto; margin-right: auto; font: 20px verdana, "sans serif", tahoma; } – Configurationism 19/2, 2013 at 17:21

Instead of applying background to your html element, I would suggest you create a container inside of body, and then move your html styles to body, and your body styles to the new container. Then add height: 100% to both html and body. See here: jsfiddle.net/zaknotzak/TVdxK/1 – Jefferson 19/2, 2013 at 17:32

Still doesn't seem to work. i'm now using a container, but what i'm getting now is the [html] background color overriding the [body] color – Configurationism 19/2, 2013 at 17:57

There shouldn't be a background on the html element. There should only be a background on your body and container elements. – Jefferson 19/2, 2013 at 17:59

sorry that is what i meant, i'm using body and container. Could there be an issue where I have used Float and Position properties in my divs? – Configurationism 19/2, 2013 at 18:8

Will do! I'll complete what i need to do and make it live, before posting a link. I imagine i've done something incredibly silly – Configurationism 19/2, 2013 at 18:20

kay-dee-emm.com/Test This is the Test home page of my site. If you minimize you'll see the problem – Configurationism 20/2, 2013 at 13:11

You still have a background on your html element, and a set width on your body. Please look at the fiddle I posted here: jsfiddle.net/zaknotzak/TVdxK/1 – Jefferson 20/2, 2013 at 16:26

Cool, now just add overflow: hidden to #container and you're set. – Jefferson 20/2, 2013 at 16:33

Try changing height to min-height on your body element. This will make the body element to be 100% is the content is too short to fill the whole thing, and grow when the content is larger than the browser.

Calcic answered 19/2, 2013 at 17:41 Comment(1)

This didn't work. Just made my body disappear entirely. Here is my live Test page: kay-dee-emm.com/Test – Configurationism 20/2, 2013 at 13:13

The accepted answer does not solve the issue when there is no content on the page then the column will not be visible at all.

The solution that finally worked is introduction of a wrapper and adding display: table;

My solution not only covers the column with background color when there IS a content, but also when there is none.

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. Nam et turpis magna, eget hendrerit nisi. Sed tincidunt felis pulvinar neque hendrerit eu sollicitudin nulla iaculis. Praesent convallis mattis magna, et tempor sapien euismod molestie. Praesent metus nisl, varius in vulputate vel, vestibulum at eros. In hac habitasse platea dictumst. Vivamus vitae turpis lectus. Praesent at tortor sit amet est lacinia porta. Duis sit amet nunc sem. Nam vel sapien a ligula vulputate sollicitudin sed at eros. Nam non urna felis. Ut quis euismod ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam felis lectus, vestibulum et fringilla in, elementum ut libero. Integer rutrum nibh a nulla pulvinar nec fermentum justo dapibus.

Integer ut massa ut diam accumsan pulvinar vitae ut metus. Nullam consectetur porttitor nunc, ac malesuada erat rhoncus a. Morbi laoreet vehicula lacinia. Aliquam pellentesque lacus non tellus fringilla at condimentum est condimentum. Sed consequat venenatis dui id egestas. Aliquam suscipit cursus odio non dictum. Mauris ipsum sapien, luctus quis pretium ac, suscipit sit amet neque. Mauris iaculis rutrum dui in lobortis.

Donec sem enim, tempor non cursus at, aliquam pretium ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis in suscipit neque. Vivamus ac augue pulvinar augue condimentum iaculis. Quisque vel augue dolor. Mauris sollicitudin porttitor tristique. Duis consectetur volutpat egestas. Donec quis tortor justo, ac accumsan ligula. Morbi sit amet magna diam. Mauris lectus ante, cursus nec bibendum ac, mattis ultricies nulla. Aliquam dui odio, elementum quis faucibus ac, tristique vel felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Pellentesque velit velit, dapibus imperdiet ullamcorper in, dapibus sed libero. Cras dapibus, dui in tincidunt feugiat, lacus tellus suscipit urna, nec fermentum ipsum massa eu quam. Sed nisl quam, dictum eget tempus id, ullamcorper quis libero. Suspendisse rutrum pretium tellus ac semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque imperdiet dui quis dui euismod aliquet. Etiam sit amet semper dolor. Donec et mattis tellus. Proin ac mi risus. Aenean sit amet nunc scelerisque neque egestas adipiscing non eu diam.

Quisque feugiat scelerisque commodo. Sed tellus nulla, fermentum a rutrum ut, vulputate et turpis. Proin at libero quis metus pellentesque dapibus. Proin nec pretium orci. Pellentesque bibendum mollis lacus vel faucibus. Integer malesuada, dolor quis iaculis laoreet, velit mi mattis turpis, vestibulum lacinia augue felis ac erat. Etiam tristique turpis sit amet nibh adipiscing vel bibendum metus vulputate. Integer mattis nulla metus, vitae viverra nisl.</div>
</div>

see that when you remove the contents - the column still stretching full-height

Yonina answered 9/11, 2021 at 10:3 Comment(0)

It seems to be an issue on Mac computers using Chrome. All other browsers seem to work. I believe it has something to do with the size of the window because while testing, while shifting the size of the inspection window the background appears color appears but then disappears when the site is at full width.

Not sure it's the best resolve, but try putting this for the container or div with the issue. This seems to have resolved the issue for me.

.full_width {
position: relative;
}

Hundley answered 4/9 at 20:48 Comment(0)

Recommended topics

Hot tags