HTML and CSS [Electronic resources] نسخه متنی

Controlling How Backgrounds Tile

CSS enables you to control the way backgrounds tile. This is done using the background-repeat property along with the appropriate value.

Tiling Along the Horizontal Axis

The horizontal axis, also referred to as the x-axis, enables you to tile a background along the element's horizontal axis, but not the vertical one:

body {background-image: url(gray.jpg); background-repeat: repeat-x;}

Figure 8-8 shows the results.

Tiling a Background Along the Vertical Axis

Similarly, you can repeat a background tile along the vertical axis only. To do this, you use the background-repeat property along with a value of repeat-y:

body {background-image: url(gray.jpg); background-repeat: repeat-y;}

You can see that the image is now tiled along the vertical axis only in Figure 8-9.

You can also set the image to not repeat using a value of no-repeat:

body {background-image: url(gray.jpg); background-repeat: no-repeat;}

This results in the tile showing up in the top-left corner one time, with no repeating.

QUANTUM LEAP: OTHER AVAILABLE PROPERTIES

Two other values are available for the background-repeat property. The first is simply repeat. Using it causes the tile to repeat on both the horizontal and vertical axes, which is default behavior for backgrounds; you probably won't use it unless you are specifically overwriting a previous rule. Many CSS properties offer a default value of this nature for precisely that reason.

The second available value is inherit. This value is available for most all properties, and because most properties are inherited, it simply strengthens the case that the property will be inherited by its descendents. You will likely not use inherit too frequently, either, unless you are specifically undoing another rule or you are applying the value to a property that is not normally inherited but that supports the value, such as background-position.