Centring background images

Background images can be controlled through the following variables:

• background-image with repeat, no-repeat, repeat-x (horizontal) or repeat-y (vertical)
• the natural size of the image
• the dimensions of the element which has the background image
• background-position.

The use of these variables should be evident in the following examples.

Some simple cases

Fig 1. <div style="background: url('pic.png') no-repeat center;"></div>

Fig 2. <div style="background: url('pic.png') repeat-x center;"></div>

Fig 3. <div style="background: url('pic.png') repeat-y center;"></div>

And here is some double centring, via two elements:

Fig 4. <div style="background: url('pic.png') repeat-x center; border: 1px solid black; height:20em; width: 20em;"><div style="background: url('pic.png') repeat-y center; height: 20em; width: 20em;"></div></div>