Geek Answers Handbook

Why does changing the background color of the body change the entire background of the page?

I recorded the height and fill values โ€‹โ€‹with this code:

jQuery( document ).ready( function() { console.log( jQuery('body').css('height') ); console.log( jQuery('body').css('padding-top') ); console.log( jQuery('body').css('padding-bottom')); }); //end ready

It is output:

 20px 0px 0px

If the body height is only 20 pixels, why does the whole browser background change to black when I use this CSS:

 body { background: black; }

I use Chrome as a browser. If you are interested in how I came across this question, I had a problem adding a click event to the body, which never fired due to the default height for the body.

+7
javascript jquery css
source share
4 answers

For a long time there was something called document.bgcolor , or something like that, which would set the background of the document itself, but it was deprecated.

Instead, it was decided that setting document.body.style.backgroundColor or, in other words, setting the background of the body will also automatically set the background color for the document , since the document object does not have the styl e property, but it is still displayed when the body elements / html does not completely cover the document, so the whole page turns black even if the body element does not cover the entire document.

+5
source share

An element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.

Defines a definition of w3schools . With this definition in mind, if the <html> element does not match the <body> style, this is a representation of the style of the document. Our little research from the comments confirms this.

Edit:

I did not see a comment on the question. The tliokos link mentions the same thing.

+1
source share

If you really want a click event on a full-sized body, try the following:

 body{ background-color: black; min-height: 100%; padding: 0; margin: 0; }
0
source share

First, you need to understand what the body is, and in mind that the body is all that you see when the page loads, to divide your page into adding a div or table and change its background.

0
source share

More articles:


All Articles