The background property is shorthand for specifying the various longhand background sub-properties just introduced (i.e., background-clip, background-color, background-image, background-origin, background- position, background-repeat, background-size, and background- attachment). One or more of these sub-properties can be specified in any order in a space-separated list. The only exception is that the value for background-size must be specified after that for background-position, separated with a forward slash (/). The property can also be used to specify multiple images. Figure 15.44 shows how it is used for a single background image and Figure 15.45 the result.
In the example, the background property specifies the background- color, background-image, background-position/background- size, background- repeat, and background-clip properties for the <p> element, the border property says to make its border lOpx-thick dotted line and black, and the padding property specifies the space between the content of the element and the border.
1. Multiple Background Images with background Property
Figure 15.46 shows how the background property can be used to specify multiple background images and implements the example presented earlier in Figures 15.36 and 15.37.
In the div#multi{} rule in the example, the width and height properties specify the size of the <div> element of id=“multi”, the first set of values of the background property says to use the image “peach_rose.png” for background, repeat it across the x-axis, position it at top-left corner of the element, and size it to 60 x 60px. The second set of values says to also use the image “grey_wall.png” for the same background, not repeat it, position it at top-left corner, and make it cover the element’s box. Essentially, all the values relating to one image are specified, followed by those of another, separated by comma. The first image specified occupies the topmost position.
In the div#inner{} rule, the width property makes the width of the <div> element of id= “inner” 500px, the margin property centers the element horizontally and vertically inside the <div> element of id=“multi”, and the color property says to give the text content #F9F0B5 color. The h2{} rule centers the content of the <h2> element horizontally.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.