Background map of CSS novice tutorial full of the whole screen


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 {
     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.


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.


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

Configure Apache to support PHP in the Apache main configuration file httpd.conf Include custom profile in

In Apache’s main configuration file / conf/ http.conf Add at the bottom Include “D:workspace_phpapache-php.conf” The file path can be any In D: workspace_ Create under PHP file apache- php.conf file Its specific content is [html] view plain copy PHP-Module setup LoadFile “D:/xampp/php/php5ts.dll” LoadModule php5_module “D:/xampp/php/php5apache2_2.dll” <FilesMatch “.php$”> SetHandler application/x-httpd-php </FilesMatch> <FilesMatch “.phps$”> SetHandler application/x-httpd-php-source </FilesMatch> […]