A background image may be positioned with reference to the border box, padding box, or content box, which are based on the CSS box model explained in Chapter 8. The property used to specify background image position area is the background- origin property. It is non-inherited, and the values it supports are listed in Table 15.5. Figures 15.27 and 15.28 show how the property is used and the effects of the values.
In the example, the div{} rule applies to all the <div> elements. The border property makes the borders lOpx-thick solid line and grey; padding specifies the space between their content and their border; background- image specifies the image to use for their background (i.e., club.jpg); and background-repeat says to repeat the image only along the x-axis. The #border{}, #padding{, and #content{} rules say to place the specified image at the top-left corner of the border box, padding box, and content box of the elements, respectively, from where it is then repeated.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.