Making a dotted grid with CSS
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;
}
Here is another way in addition to changing the background-position
that may work whataver the size is:
body {
background-image: radial-gradient(circle at 1px 1px, black 1px, transparent 0);
background-size: 40px 40px;
}
body {
background-image: radial-gradient(circle at 1px 1px, black 1px, transparent 0);
background-size: 50px 30px;
}
Basically the idea is to change the position of the dots inside the area defined by background-size
to the top/left instead of shifting all the background