Shulou(Shulou.com)06/02 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.