background image - Making a dotted grid with CSS

Question

I want the whole body to have a dotted grid

body {
  background-image: radial-gradient(black 1px, transparent 0);
  background-size: 40px 40px;
}

question from:https://stackoverflow.com/questions/65853790/css-js-how-can-i-do-a-lot-of-dots-with-few-code-lines

Answer 1

Update

The following solution works, but only for a fixed background-size. See @Temani Afif's answer for a better solution.

Answer

You can use the background-position CSS property to do exactly what you were thinking.

body {
  background: white;
  background-image: radial-gradient(black 1px, transparent 0);
  background-size: 40px 40px;
  background-position: -19px -19px;
}