Trying to create a polka-style custom background using only CSS

Question

I am trying to make a grid background of dots. I cannot just use the image because I need everything so that it can be customized:

• background color
• dot color
• point size
• space between points

If there is no better solution, I think the only way to achieve this is with pure CSS. I looked around a bit, and so far the closest thing I found is using a radial gradient. I have a problem's; I could not find a solution that allows me to adjust the size of the point and the space between the points, keeping the shape of a circle. I came close, but my dots end up looking like diamonds, not circles. Here is what I have come up with so far:

https://jsfiddle.net/yzpuydtn/

body {
  background-image: radial-gradient(black 2px, white 2px);
  background-size:40px 40px;
}

- ? , 2px x 2px 40 px . , ? , , , , , , , .

Answer 1

%: https://jsfiddle.net/yzpuydtn/11/
vw: http://jsfiddle.net/otwhu0uk/2/

. , .

body {
  /* Controls size of dot */
  background-image: radial-gradient(black 5%, white 0%);
  /* Controls Spacing, First value will scale width, second, height between dots */
  background-size:5% 10%;
}

Answer 2

https://jsfiddle.net/yzpuydtn/9/
JavaScript:

var setBackground = function(dotColor, backgroundColor, dotRadius, dotSpacing){
    // create string for background-image property
    var image = 'radial-gradient(circle, '+dotColor+' '+dotRadius+'px, '+backgroundColor+' 0px)';
    // create string for background-size property
    var size = dotSpacing+'px '+dotSpacing+'px';
    //set properties
    document.body.style.backgroundImage = image;
    document.body.style.backgroundSize = size;
};

:
setBackground('red','green','20','50');

setBackground('rgb(255,165,0)','rgb(160,255,170)','10','60');
, .