HTML and CSS Reference
In-Depth Information
Multiple Backgrounds
Building on what you saw in Listing 5-4, multiple backgrounds are a new feature that allows designers to apply multiple
background images to an element. This could be helpful if you want to create a complex ad background image from two
independent image sources. In fact, let's attempt to do just that in building our ad's background (see Listing 5-5).
Listing 5-5.
Multiple Background Example
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#ad {
position: absolute;
width: 300px;
height: 250px;
background-color: white;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
/*
top level icon (x,y,repeat)
bottom level background (x,y,repeat)
*/
background:
url(logo.png) 20px 10px no-repeat,
url(300x250Bg.jpg) 0px 0px no-repeat;
}
</style>
</head>
<body>
<div id='ad'></div>
</body>
</html>
If you add the previous code and refresh the browser, you'll see that this example loads in two separate images to
the background property of the
div
element
ad
(see Figure
5-5
). Notice that the parameters are URL, X, Y and repeat.
