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

This article mainly shows you "how to set background pictures in css". The content is simple and clear. I hope it can help you solve your doubts. Let me lead you to study and learn this article "how to set background pictures in css".

How does css set the background image?

The cssbackground property is a property that specifically sets the background. You can set the background color or the background picture.

Let's look at the properties that background can set:

Background-color: specifies the background color to be used.

Background-position: specifies the location of the background image.

Background-size: specify the size of the background image.

Background-repeat: specifies how to repeat the background image.

Background-origin: specifies the location area of the background image.

Background-clip: specifies the drawing area of the background.

Background-attachment: specifies whether the background image is fixed or scrolled along with the rest of the page.

Background-image: specifies the background image to be used.

You can see that the background-image property sets the properties of the background image to the html page. Let's take a look at its usage.

Background-image:url (1.jpg)

In this way, by giving the path to the picture in url (), you can set a background image for the div box; it seems simple, but it is important to note that the box that sets the background image must have a substantial width and height, so that the background image can be displayed on the display screen.

If the setting of the above background properties is not cumbersome, in fact, some properties can be set together, such css background expression can save and optimize the css file code. Example:

Background:url (bgimg.gif) no-repeat5px5px

Code example of setting background image by css

1.css sets the background picture to adapt to full screen

Background picture settings

.demo {

Position:fixed

Top:0

Left:0

Width:100%

Height:100%

Min-width:1000px

Z-index:-10

Zoom:1

Background-color:#fff

Background:url (2.png)

Background-repeat:no-repeat

Background-size:cover

-webkit-background-size:cover

-o-background-size:cover

Background-position:center0

}

The above is all the contents of the article "how to set background pictures in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.