Body, HTML and background-color

Sometimes we need to set a background color for the entire page, so we will set the body, or HTML, as follows:

CSS code: body {background: SkyBlue; }Copy the code

HTML code: < HTML ><body></body></ HTML >. Some tags are omitted here. This is just proof that there is no content in the bodyCopy the code

By default, background-color is used to cover the entire box, and the body height of the page is 0.

In case you’re wondering, what’s going on?

This brings us to something you probably haven’t heard of: canvas

But the canvas here is not the canvas canvas in HTML5, it is a display area, remember its features:

  • The minimum width of the canvas is equal to the width of the viewport (the canvas size may also exceed the viewport size, such as x, Y scrollbars)
  • When the HTML tag does not set the background color, but the body does, it is equivalent to setting the background color on the canvas
  • If THE HTML has a background color set, the background color is applied to the canvas area, and the body background color is displayed normally, the background color of the HTML will cover the canvas area as shown below:So, if we want to set a background color for the entire web page, it is best to set it directly for the HTML.
  • In general, the background image is the same, change background-color to background-image

The background picture of the canvas

The background picture on the canvas means

  • The HTML tag does not set the background image, but the body does
  • The HTML tag sets the background image

The background of the canvas has the following characteristics:

  1. When the background image is set to a percentage width, the width size is relative to the viewport width, not the width of the canvas area
  2. When the background image is set to a percentage height, the height size is relative to the HEIGHT of the HTML (web page), not the height of the canvas or body element, as shown below:

    Don’t you think it’s a little weird? It’s not over yet. Check it out below:

  3. Horizontal positioning of background image is set to percentage or default (Center,left,right,top…). , relative to the viewport

  4. The vertical orientation of the background image is set to percentages or default values (Center,left,right,top…). , relative to a web page


Ok, today’s little knowledge to share here, see you tomorrow!!