<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS Backgrounds: background-image :first-letter layered images</title> <link href=" http://www.justin-hill.com" rel="author" title="Justin Hill" /> <link href="http://www.w3.org/TR/css3-background/#the-background-image" rel="help" /> <link href="reference/background-image-001-ref.xht" rel="match" /> <meta content="Test checks that background-image displays multiple images in correct order on :first-letter selector." name="assert" /> <style> .container { top:50px; left:50px; width: 100px; height: 100px; } .container p:first-letter { width:100px; height:100px; color:transparent; font-size: 50px; background-image: url("support/green.png"), url("support/red.png"); background-color: red; display: block; margin: 0px; } </style> </head><body> <p> Test passes if green image shows and no red visable.</p> <div class="container"> <p>x</p> </div> </body></html>