How to use css to fill the whole screen with background image
This article mainly explains "how to use css to make the background image fill the whole screen". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use css to make the background image fill the whole screen".
The css background image is filled with the entire screen code
If you let the entire interface have a background image, you will naturally think of adding background to body. The code is as follows:
one
Body {
two
Width:100%
three
Height:100%
four
/ * load background image * /
five
Background:url (".. / static/images/index/backImg.jpg") no-repeat
six
/ * the background image is centered vertically and horizontally * /
seven
Background-position:centercenter
eight
/ * when the content height is greater than the picture height, the position of the background image is fixed relative to the viewport * /
nine
Background-attachment:fixed
ten
/ * make the background image scale based on the container size * /
eleven
Background-size:cover
twelve
/ * set the background color, which will be displayed during the loading of the background image * /
thirteen
Background-color:rgba (41, 50, 39, 1)
fourteen
}
It is found that the height of the body is 0, so the image 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 fills the whole screen.
Css background code extension
Url (images/beijing.png)-the location of the image path
No-repeat-- pictures do not repeat
Center0px--center is the location on the left of the page, and 0px is the location on the top of the page.
Background-position:center0-- is the location of the picture, as above
Background-size:cover;-- expands the background image to be large enough 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
The height of the min-height:100vh;-- window. The "viewport" refers to the size of the visible area inside the browser, that is, the window.innerWidth/window.innerHeight size.
Thank you for your reading, the above is the content of "how to use css to make the background image fill the entire screen". After the study of this article, I believe you have a deeper understanding of how to use css to make the background image fill the entire screen. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
