CSS background-image

The background-image property sets a background image for an element. It can also accept multiple comma-separated values to set mutiple background images for an element.

CSS

background-image: value;
						

By default, a background image is placed at the top left corner of an element. If the size of the background image is smaller than that of the element's containing box, then it repeats horizontally as well as vertically until the background of the box is filled. This behaviour can be changed using the background-repeat property. You can also resize or change the position of the background image using the background-size and background-positionproperties respectively.

Values

<image> : This specifies the url of the image which is to be set as background image.

none : No background image is displayed. This is the default value.

initial : Sets the default value of the property.

inherit : Inherits the value from parent element.

Example

In the following example, since the background image is smaller than its container's size, by default it gets repeated in the horizontal and the vertical direction. To set the background image, its url its given to the background-image property.

CSS

background-image: url('/path/bg1.jpg');
						

In the above declaration, the path of the background image is given within url('').

See the Pen background-image example by Aakhya Singh (@aakhya) on CodePen.

Giving multiple background images

To set multiple background images, give multiple comma-separated values to the background-image property. When more than one background image is set, each image forms a background layer, with the layers stacked on top of each other. Among the multiple values given, the first image layer appears on top (towards the user), while the other image layers are below it depending on the order in which those are specified.

If there is some transparent portion in a background image, then the image below it will be visible through that portion. Look at the following example.

Here, the first div is given a background image 'penguin.png' by giving background-image: url('penguin.png'). To prevent the image from getting repeated in the horizontal and vertical directions, it is given background-repeat: no-repeat.

HTML

<div></div>

CSS

div {
    width: 320px;
    height: 216px;
    background-image: url('penguin.png');
    background-repeat: no-repeat;
}

The second div is given two background images 'penguin.png' and 'snow.jpg' by giving background-image: url('penguin.png'), url('snow.jpg'). The first image 'penguin.png' forms the top background layer while 'snow.jpg' forms the bottom background layer.

CSS

div {
    width: 320px;
    height: 216px;
    background-image: url('penguin.png'), url('snow.jpg');
    background-repeat: no-repeat;
}

The demo of this example is shown below.

See the Pen Adding multiple image backgrounds by Aakhya Singh (@aakhya) on CodePen.

Giving background color with background images

If you also give a background color along with background images, then the background color will also form a background layer which will be below all the other background image layers. This means that the background color will be visible only if either there is no background image given or the background image has some transparent portion.

It is always good to give a background color if you give a background image, so that the background color is visible if the image fails to load.

In the following demo, the div is given a background color along with a background image.

CSS

div {
    width: 320px;
    height: 216px;
    background-image: url('penguin.png');
    background-color: blue;
    background-repeat: no-repeat;
}

See the Pen Adding background image with background color by Aakhya Singh (@aakhya) on CodePen.

Browser Support

This property is supported in all the major browsers.