Background Image
suggest changeThe 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.
Value | Result ––––––––––––––|–––––––––––––––– 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 none
| No background image initial
| Default value inherit
| Inherit 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;