Background map of CSS novice tutorial full of the whole screen

Time:2019-11-6

To make the whole interface have a background picture, it’s natural to think of adding background to the body. The code is as follows:

body {
     width:100%;
     height: 100%;
    /*Load background*/
    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 position of the background image is fixed relative to the viewport*/
    background-attachment: fixed;
    /*Scale the background image based on the size of the container*/
    background-size: cover;
    /*Set the background color. The background color will be displayed during the loading process of background image*/
  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 value, and the background picture is full of the whole screen.

extend

URL (images / Beijing. PNG) – the location of the image path;

No repeat — the picture is not repeated;

Center 0px – center is the location to the left of the page, and 0px is the location to the top of the page;

Background position: Center 0 – the location of the image, 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 location area;

Min height: 100vh; — the height of the window, “view area” refers to the size of the visual area inside the browser, that is, the size of window.innerwidth/window.innerheight.

summary

The above is the whole content of this article. I hope that the content of this article has some reference learning value for your study or work. Thank you for your support for developepaer.

Recommended Today

The use of progressbarcontrol, a progress bar control of devexpress – Taking ZedGraph as an example to add curve progress

scene WinForm control – devexpress18 download installation registration and use in vs: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/100061243 When using ZedGraph to add curves, the number of curves is slower if there are many cases. So in the process of adding curve, the progress needs to be displayed, and the effect is as follows     Note: Blog home page:https://blog.csdn.net/badao_liumang_qizhi […]