Webeng Webeng - 1 year ago 68
HTML Question

Black background-color after html element

I am having an issue on my website with the background color. The code between the html tags works perfectly fine

<!DOCTYPE html>

To get the desired result. HOWEVER, if the screen is too big to hold the bage, a black background color appears at the bottom to take up that space:

enter image description here

Everything works fine if the page is equal to or bigger than the screen. No overflow of the black area happens.

NOTE: If I zoom out of any of the pages to the point where the Screen is bigger than all the content, all the pages will have the same issue.

QUESTION: Is there a way in CSS (or Javascript) to change the default color of the black area in the picture (which resides after the HTML element)?


The following website is an example:

if you scroll back from the website, and use google chromes "inspect" option, you'll see that the html is not taking up the whole page, and that the black part at the bottom is something separate. I would like to know how to change that blackness at the bottom into another color (like white).

Answer Source

Here you see your live example once with active background-color rule on body and without. And you see it's the body's background-color what causes the black.

Active: Active Background-Color

Not active: Not-Active Background-Color

If you want to keep the body black, so set the background-color of your html tag to the color you wish (at the moment it's transparent, so it lets the black color of the body through).

Set Background-Color on HTML

For your desired white you would do something like:

html {

I don't know if you can change the default, but if not you can just add !important right after the color code.