CSS Background Image


Example

The background-image property is used to specify a background image to be applied to all matched elements. By default, this image is tiled to cover the entire element, excluding margin.

.myClass {
  background-image: url('/path/to/image.jpg');
}

To use multiple images as background-image, define comma separated url()

.myClass {
  background-image: url('/path/to/image.jpg'),
                    url('/path/to/image2.jpg');
}

The images will stack according to their order with the first declared image on top of the others and so on.

ValueResult
url('/path/to/image.jpg')Specify background image's path(s) or an image resource specified with data URI schema (apostrophes can be omitted), separate multiples by comma
noneNo background image
initialDefault value
inheritInherit parent's value

More CSS for Background Image

This following attributes are very useful and almost essential too.

background-size:     xpx ypx | x% y%;
background-repeat:   no-repeat | repeat | repeat-x | repeat-y;
background-position: left offset (px/%) right offset (px/%) | center center | left top | right bottom;