CSS Multiple Backgrounds
CSS lets you add more than one background image to an element using the background-image property.
Separate each image with a comma. The images stack on top of each other, with the first image closest to the viewer.
Individual background properties
This example uses two background images with individual properties: background-image, background-position, and background-repeat. The first image is a flower aligned to the right bottom, and the second is a paper texture that repeats.
Prompt
Create a page with a div that has two background images using individual CSS background properties: background-image, background-position, and background-repeat. The first image (a small flower, use "img_flwr.gif") should be aligned to the right bottom with no-repeat, and the second image (a paper texture, use "paper.gif") should repeat from the top-left. Add some lorem ipsum text inside the div.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Multiple Backgrounds - Individual Properties</title>
<style>
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
</style>
</head>
<body>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
Background shorthand property
You can also use the background shorthand property to set multiple backgrounds in one declaration. This gives the same result as the example above.
Prompt
Create a page with a div that has two background images using the CSS background shorthand property. The first image ("img_flwr.gif") should be right bottom no-repeat, and the second image ("paper.gif") should be left top repeat. Add some lorem ipsum text inside the div.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Multiple Backgrounds - Shorthand</title>
<style>
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
padding: 15px;
}
</style>
</head>
<body>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
CSS Advanced Background Properties
Here are the CSS background properties used for advanced backgrounds:
background— a shorthand property for setting all background properties in one declaration.background-clip— sets the painting area of the background.background-image— sets one or more background images for an element.background-origin— sets where the background image is positioned.background-size— sets the size of the background image.