1 <!DOCTYPE html>
2 <html><head><title>CSS Backgrounds: background-image :first-letter layered images</title>
3 <link href="http://www.justin-hill.com" rel="author" title="Justin Hill">
4 <link href="http://www.w3.org/TR/css3-background/#the-background-image" rel="help">
5 <link href="reference/background-image-001-ref.htm" rel="match">
6 <meta content="Test checks that background-image displays multiple images in correct order on :first-letter selector." name="assert">
7 <style>
8 .container {
9 top:50px;
10 left:50px;
11 width: 100px;
12 height: 100px;
13 }
14
15 .container p:first-letter {
16 width:100px;
17 height:100px;
18 color:transparent;
19 font-size: 50px;
20 background-image: url("support/green.png"), url("support/red.png");
21 background-color: red;
22 display: block;
23 margin: 0px;
24 }
25 </style>
26 </head><body>
27 <p> Test passes if green image shows and no red visable.</p>
28 <div class="container">
29 <p>x</p>
30 </div>
31
32 </body></html>