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;
}

The issue is that I want to relocate it so that a dot is placed at (0, 0), which is the body's top left corner. As a result, the entire structure should be adjusted by -20px and -20px. Or do you think there's a better way?

Answer 1

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;
}