css to achieve full screen effect of background image

If you want the entire interface to have a background image, the natural idea is to add a background to the body. The code is as follows:

body {
     width：100%；
     height: 100%;
    /* 加载背景图 */
    background: url("../static/images/index/backImg.jpg") no-repeat;
    /* 背景图垂直、水平均居中 */
    background-position: center center;
    /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
    background-attachment: fixed;
    /* 让背景图基于容器大小伸缩 */
    background-size: cover;
    /* 设置背景颜色，背景图加载过程中会显示背景色 */
　　background-color: rgba(41, 50, 39, 1);
}

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

(Recommended tutorial: CSS tutorial)

Extended knowledge:

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

no-repeat——The picture does not repeat;

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

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

background-size: cover; - expand the background image to a large enough size so that the background image 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, "view area" refers to the size of the visible area inside the browser, that is window.innerWidth/ window.innerHeight size.

Recommended related video tutorials: css video tutorial

The above is the detailed content of css to achieve full screen effect of background image. For more information, please follow other related articles on the PHP Chinese website!