CSS Background-image Property

In the CSS Background-color property page, we see that we can specify a single color for the background. What if we want to use an image for our background? That's what the background-image property is for.

The syntax for background-image is as follows:

background-image:url(image_name);

where image_name is the name of the image.

Let's look at the example below. We want to use the 1Keydata icon as the image for a 300px by 300px space, so we use the following CSS declaration:

background-image:url(1keydata.gif);

which results in the following:

We are able to use the correct picture for the background. But why is it repeating both horizontally and vertically? The reason is that by default, the background image repeats itself in both the x- and y- directions until it fills the element.

The repeat behavior can be controlled by the background-repeat property. We can also control the position of the background image, and that is via the background-position property.

Specify multiple background images

If we want to declare multiple background images, simply use the following syntax:

background-image: url(image1), url(image2), ...

The image that's declared first will appear on top (closest to you), the image that's declared second will appear right below the first image, and so on. The last image declared will appear as if it sits at the bottom. If we think in terms of z-index values, the image that's declared first has the highest z-index value, the image that's declared second has the second-highest z-index value, and the image that's declared last has the lowest z-index value.

Below is an example. The CSS declaration is,

background-image: url(1keydata.gif), url(banana.png);

which yields the following,

We can both the 1Keydata icon and the banana image are set as the background. The banana image appears behind the 1Keydata icon because the banana image is the second image specified.