background-image-004

CSS Backgrounds: background-image layered images

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Assertion
Test checks that background-image displays multiple images in correct order on tag.

Source

 1 <!DOCTYPE html>
 2 <html><head><title>CSS Backgrounds: background-image &lt;a&gt; 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 <a> tag." name="assert">
 7 <style>
 8     .container {
 9       top:50px;
10       left:50px;
11       width: 100px;
12       height: 100px;
13     }
14 
15     a {
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     }
24 </style>
25 </head><body>
26     <p> Test passes if green image shows and no red visable.</p>
27     <div class="container">
28       <a href="#">x</a>
29     </div>
30 
31 </body></html>