<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            div {
                width: 500px;
                height: 300px;
                border: 50px solid transparent;
                padding: 50px;
            }
        </style>
        <script>
            var sizeX = 151, sizeY = 128, spaceX = 32, spaceY = 58, width = 700, height = 500;

            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(", ") + ";" +
                                     "background-repeat: no-repeat;" +
                                     "background-origin: border-box;" +
                                     "background-clip: border-box;";
           }
       </script>
    </head>

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