<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            div {
                width: 400px;
                height: 300px;
                border: 50px solid transparent;
                padding: 50px;
                background-repeat: no-repeat;
                background-origin: padding-box;
                background-clip: padding-box;
            }
        </style>
        <script>
            var sizeX = 150, sizeY = 120, spaceX = 25, spaceY = 20, width = 400, height = 300;

            var urls = Array(), size = Array(), position = Array();

            function addBackground() {
                for (var x = 0; x < width; x += sizeX + spaceX) {
                    for (var y = 0; y < height; y += sizeY + spaceY) {
                        urls.push("url(resources/circle.png)");
                        size.push(sizeX + "px " + sizeY + "px");
                        position.push(x + "px " + y + "px");
                    }
                }

                div = document.getElementById("main");

                div.style.cssText += "background-image: " + urls.join(", ") + ";" +
                                     "background-size: " + size.join(", ")  + ";" +
                                     "background-position: " + position.join(", ") + ";";
           }
       </script>
    </head>

    <body onload="addBackground()">
        <div id="main" />
    </body>
</html>