I want the whole body to have a dotted grid
body {background-image: radial-gradient(black 1px, transparent 0);background-size: 40px 40px;}The problem is that I want to shift it so that a dot is placed at the point (0, 0), i.e. the top left corner of the body. So the whole structure should be shifted at -20px, -20px. Or probably there is a better solution?
Best Answer
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