CSS beginner tutorial: background image fills the entire screen

If you want the entire interface to have a background image, you naturally think of adding a background to the body. The code is as follows:

body {
     width: 100%;
     height: 100%;
    /* Load background image */
    background: url("../static/images/index/backImg.jpg") no-repeat;
    /* The background image is centered vertically and horizontally*/
    background-position: center center;
    /* When the content height is greater than the image height, the background image is fixed relative to the viewport*/
    background-attachment: fixed;
    /* Let the background image scale based on the container size*/
    background-size: cover;
    /* Set the background color. The background color will be displayed during the background image loading process*/
  background-color: rgba(41, 50, 39, 1);
}

It is found that the height of the body is 0, so the picture cannot be displayed; the solution is to set the width and height of the HTML to 100%, so that the body has a value and the background image completely fills the entire screen.

Extensions

url(images/beijing.png)——the location of the image path;

no-repeat——the image is not repeated;

center 0px——center is positioned from the left side of the page, 0px is positioned from the top of the page;

background-position: center 0——is the positioning of the image, same as above;

background-size: cover; — Expands the background image to be large enough so that it completely covers the background area. Some parts of the background image may not be displayed in the background positioning area;

min-height: 100vh;——The height of the window. “Viewport” refers to the size of the visible area inside the browser, that is, window.innerWidth/window.innerHeight.

Summarize

The above is the full content of this article. I hope that the content of this article will have certain reference learning value for your study or work. Thank you for your support of 123WORDPRESS.COM.