<!DOCTYPE html>
<html>
    <head>
    <title>Test of CSS3 background-position 4 values</title>
    <style>
    .diamond { width: 10px; height: 10px; background-image: url("./resources/diamond.png"); position:relative; line-height:0; }
    .ring { width: 42px; height: 42px; background-image: url("./resources/ring.png"); position:relative; line-height:0; }
    .box { width: 100px; height: 100px; }
    </style>
    </head>
    <body>
    <table border cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <div class="box">
                <div class="diamond" style="left:10px; top:15px;"></div>
            </div>
        </td>
        <td>
            <div class="box">
                <div class="diamond" style="left:80px; top:80px;"></div>
            </div>
        </td>
        <td>
            <div class="box">
                <div class="diamond" style="left:0px; top:0px;"></div>
            </div>
        </td>
        <td>
            <div class="box">
                <div class="diamond" style="left:10px; top:15px;"></div>
            </div>
        </td>
        <td>
            <div class="box">
                <div class="diamond" style="left:0px; top:15px;"></div>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="box">
                <div class="diamond" style="left:10px; top:0px;"></div>
            </div>
        </td>
        <td>
            <div class="box">
                <div class="diamond" style="left:90px; top:15px;"></div>
            </div>
        </td>
        <td>
            <div class="box">
                <div class="diamond" style="left:10px; top:45px;"></div>
            </div>
        </td>
        <td>
            <div class="box">
                <div class="diamond" style="left:45px; top:20px"></div>
            </div>
        </td>
        <td>
            <div class="box">
                <div class="diamond" style="left:45px; top:20px"></div>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="box">
                <div class="diamond" style="left:30px; top:45px"></div>
            </div>
        </td>
        <td>
            <div class="box">
                <div class="diamond" style="left:20px; top:0px"></div>
            </div>
        </td>
        <td>
            <div class="box">
                <div class="diamond" style="left:45px; top:45px"></div>
                <div class="ring" style="left:0px; top:28px"></div>
            </div>
        </td>
        <td>
            <div class="box">
                <div class="diamond" style="left:70px; top:70px"></div>
                <div class="ring" style="left:0px; top:19px"></div>
            </div>
        </td>
        <td>
            <div class="box">
                <div class="diamond" style="left:10px; top:15px;"></div>
                <div class="ring" style="left:38px; top:28px"></div>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="box">
                <div class="diamond" style="left:10px; top:0px"></div>
                <div class="ring" style="left:58px; top:0px"></div>
            </div>
        </td>
        <td>
            <div class="box">
                <div class="diamond" style="left:90px; top:15px"></div>
                <div class="ring" style="left:38px; top:48px"></div>
            </div>
        </td>
        <td>
            <div class="box">
                <div class="diamond" style="left:45px; top:45px"></div>
                <div class="ring" style="left:29px; top:19px"></div>
            </div>
        </td>
        <td>
            <div class="box">
                <div class="diamond" style="left:45px; top:45px"></div>
                <div class="ring" style="left:58px; top:19px"></div>
            </div>
        </td>
        <td>
            <div class="box">
                <div class="diamond" style="left:30px; top:45px"></div>
                <div class="ring" style="left:29px; top:48px"></div>
            </div>
        </td>
    </tr>
    </table>
    </body>
    </body>
</html>