Clever Geek Handbook

Why does the html tag take the background of the body tag only if the html tag doesn't have a background background property

So I noticed that when I remove a property to background

or background-color

from a selector html

, when there is a property background

or background-color

present for the selector body

, the background of the body takes up the whole screen.

However, if the or html

property is set for the tag , then the body property only affects the part of the screen that the body occupies, AKA, the body content, and not the entire screen.background

background-color

background

What is the reason for this (error, solution ...) and now I need to set both backgrounds for html

and body

now? Thank.

+3


source to share


1 answer


This is by design.

According to the W3C page Colors and Backgrounds ,

However, for HTML documents, we recommend that authors specify a background for the BODY element rather than the HTML element. For documents whose root element is an "HTML" HTML element or an XHTML "html" element that computed "transparent" for "background-color" and "none" for "background-image", user agents should instead use the computed value background properties from this element first the BODY HTML element or a child of the XHTML body element when drawing the background for the canvas, and should not draw the background for this child.

Or, tl; dr: Leaving only the background <html>

and only styling the body will cause the background to be assigned to the entire document. This is a recommendation.

The reason is probably for compatibility reasons. A long time ago, the element <body>

also played the role of a canvas, and the element <html>

really didn't have any properties of its own. This way you can assign a property bgcolor

to <body>

(but not to <html>

) and that becomes the background of the canvas.

And the answer to your last question: only if you want it. In most cases styling isn't enough <html>

. Except in special cases, for example. if you want a differently colored edge around the body as you noticed.



Example with background only <body>

:

body {background:lime}
      

        
        
        
      

    
Hello world
Run codeHide result


Example with different backgrounds for <html>

and <body>

:

html {background:orange}
body {background:lime}
      

        
        
        
      

    
Hello world
Run codeHide result


+2


source






More articles:


All Articles