<!DOCTYPE html>
<html>
    <head>
    <title>Test of CSS3 background-position 4 values</title>
    <style>
    div { width: 100px; height: 100px; background-repeat: no-repeat; background-image: url("./resources/diamond.png"); }
    #one { background-position: left 10px top 15px;}
    #two { background-position: right 10px bottom 10px; }
    #three { background-position: left top; }
    #four { background-position: 10px 15px; }
    #five { background-position: left 15px; }
    #six { background-position: 10px top; }
    #seven { background-position: right top 15px; }
    #eight { background-position: left 10px center; }
    #nine { background-position: center top 20px; }
    #ten { background-position: top 20px center; }
    #eleven { background-position: center left 30px; }
    #twelve { background-position: left 20px top; }

    #thirteen { background-image: url("./resources/diamond.png"), url("./resources/ring.png"); background-position: center, left bottom 20px; }
    #fourteen { background-repeat: no-repeat, no-repeat; background-image: url("./resources/diamond.png"), url("./resources/ring.png"); background-position: right 20px bottom 20px, center left; }
    #fifteen { background-image: url("./resources/diamond.png"), url("./resources/ring.png"); background-position: left 10px top 15px, right 20px bottom 20px; }
    #sixteen { background-image: url("./resources/diamond.png"), url("./resources/ring.png"); background-position: left 10px top, top 10px right; }
    #seventeen { background-image: url("./resources/diamond.png"), url("./resources/ring.png"); background-position: right top 15px, bottom right 20px; }
    #eighteen { background-image: url("./resources/diamond.png"), url("./resources/ring.png"); background-position: center, center; }
    #nineteen { background-image: url("./resources/diamond.png"), url("./resources/ring.png"); background-position: center, center right; }
    #twenty { background-image: url("./resources/diamond.png"), url("./resources/ring.png"); background-position: left 30px center, center bottom; }
    </style>
    </head>
    <body>
    <table border cellspacing="0" cellpadding="0">
    <tr>
        <td><div id="one"></div></td>
        <td><div id="two"></div></td>
        <td><div id="three"></div></td>
        <td><div id="four"></div></td>
        <td><div id="five"></div></td>
    </tr>
    <tr>
        <td><div id="six"></div></td>
        <td><div id="seven"></div></td>
        <td><div id="eight"></div></td>
        <td><div id="nine"></div></td>
        <td><div id="ten"></div></td>
    </tr>
    <tr>
        <td><div id="eleven"></div></td>
        <td><div id="twelve"></div></td>
        <td><div id="thirteen"></div></td>
        <td><div id="fourteen"></div></td>
        <td><div id="fifteen"></div></td>
    </tr>
    <tr>
        <td><div id="sixteen"></div></td>
        <td><div id="seventeen"></div></td>
        <td><div id="eighteen"></div></td>
        <td><div id="nineteen"></div></td>
        <td><div id="twenty"></div></td>
    </tr>
    </table>
    </body>
    </body>
</html>
