<!DOCTYPE html> <html> <head> <title>Background attribute tests</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../../test.js"></script> <style> html { background-color: red; } body { background-color: lime; } .small div{ width:100px; height:100px; float:left; margin:10px; border:1px solid #000; } .medium div{ width:200px; height:200px; float:left; margin:10px; border:1px solid #000; } .small, .medium{ clear:both; } div{ display:block; } </style> </head> <body> <div class="medium"> <div style="background-image:url(../../assets/image.jpg), url(../../assets/image2.jpg); background-repeat: repeat-x; background-position: 50px 50px, 100px 130px;"></div> <div style="background-image:url(../../assets/image.jpg), url(../../assets/image2.jpg); background-repeat: repeat-x; background-position: 50px 50px, 20px -20px;"></div> <div style="background-image:url(../../assets/image.jpg), url(../../assets/image2.jpg); background-repeat: repeat-x; background-position: 50px 50px, 450px 100px;"></div> </div> </body> </html>