Loading lesson path
Concept visual
Overview
Formula
CSS allows you to add multiple background images for an element, through the background - image property.The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer. The following example has two background images, the first image is a flower
Formula
(aligned to the right - bottom) and the second image is a paper - like background (aligned to the top - left corner):Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
Multiple background images can be specified using either the individual background properties (as above) or with the background shorthand property.
The following example uses the background shorthand property (same result as example above):#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}Formula
A shorthand property for setting all the background properties in one declaration background - clip
Specifies the painting area of the background background - image
Specifies one or more background images for an element background - origin
Specifies where the background image(s) is/are positioned background - size