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
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
#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)
url(logo.png) 20px 10px no-repeat,
url(300x250Bg.jpg) 0px 0px no-repeat;
<div id='ad'></div>
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.
Search WWH ::

Custom Search