CSS allows you to add images to the background of an HTML element and also provides properties for controlling them in various ways.
1. Adding Background Images
The property used to add background images is the background-image property. It is non-inherited and can be used to place one or more images behind an element and use them as background. When multiple images are used, the one specified first is placed on top and the border of the element’s box is drawn on top and the background color beneath everything. This means that when an element has an image as background, its background color is obscured. By default, an image is positioned at top-left corner of an element’s box and then repeated to cover the area of the box. This means that the same image in different sizes will produce different visual effects.
Figure 15.15 shows the image used here to demonstrate the use of the background-image property. It is called “wood.png” and is 512 x 512 in size.
Figure 15.16 shows how the background-image property is used and Figure 15.17 the result. In the body{} rule, background-image says to use the image, “wood.png,” found at the location specified by the url () method for the background of the <body> element and padding specifies the space between the content of the element and its border.
Figures 15.18 and 15.19 show the same image used in the previous example in the <p> element instead of in the <body> element. A similar effect will be obtained with the <div> element.
2. Repeating Background Images
As just mentioned, the image specified for background is by default repeated to make it fill the background of an element. One of the consequences of this is that the last image can sometimes get clipped if it does not fit precisely. The property that controls whether or not this repetition should happen and if it does how an image should be repeated is the background-repeat property. It is non-inherited and the values it takes are listed in Table 15.4.
The effects of the values listed in the table are demonstrated in Figures 15.21 through 15.28, using the image in Figure 15.20. Note that it is the 32×32 version of the image that is used in Figure 15.28.
2.1. repeat-x and repeat-y
Figure 15.21 shows how to use the repeat-x value and Figure 15.22 shows the result. Notice that the last image on the right is clipped.
Figure 15.23 shows the result of the code in Figure 15.21 when repeat-y is used instead of repeat-x, so that the declaration becomes background- repeat: repeat-y.
2.2. space and round
Figure 15.24 shows an example of how the space value is used and Figure 15.25 the result in Opera. Figure 15.26 shows the effect of using round.
Notice that there are 12 images in the first example, while there are 13 in the second, yet the width of the browser is the same in both cases. In the first, the images are equally spaced to cover the browser’s width to avoid clipping the last one, while in the second the images are scaled down and another added to prevent it.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.