1, background properties
background attribute is responsible for the box set the background image and color, it is a complex property, it can be broken down into the following settings:
- background-color set the background color
- background-image set the background image address
- background-repeat repeat how to set the background image tiling (repeat-x, repeat-y, no-repeat, repeat the default value)
- background-postion to set the background image position
- Background-attachment whether fixed or set the background image with the scroll bar to scroll the page, set the value: fixed, said in scrolling web pages, background image does not move
background property is an abbreviation of the above five properties, higher performance abbreviated form, code more concise.
比如:background: #00ff00 url(bgimage.gif) no-repeat left center fixed
Note that, in addition to the above five properties, the remaining three properties: background-size, background-origin, background-clip is to write out alone.
1.1 Abbreviations order
Let's take a look at the official definition of the CSS background properties:
Value: ['background-color'> ||<'background-image'> || <'background-repeat'>|| <'background-attachment'> ||<'background-position'>] | inherit
The above content is simply the value of the background attribute definition includes those elements, but the order does not specify these values, so that the written order of the values of the background of the official property is not mandatory. However, for readability and specifications, generally Abbreviation background sequence is background-color, background-image, background-repeat, background-attachment, background-position.