| <!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-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> |
