20

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?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Eugene Barsky
  • 5,780
  • 3
  • 17
  • 40

2 Answers2

31

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;
}
Tim Klein
  • 2,538
  • 15
  • 19
  • Thanks, that's exactly what I wanted!! Strangely, I tried it, putting it above the whole code and it didn't work. – Eugene Barsky Mar 26 '19 at 18:43
  • 1
    In your case, you are utilizing the [`background` shorthand property](https://www.w3schools.com/cssref/css3_pr_background.asp) which you could supply a host of parameters. If you put the `background-position` property (or any other specific property for the background) before the `background` shorthand property, then it will be overridden by the shorthand property filling in default values. It is important that anywhere you use a shorthand property to set it first, then set any specific properties. Other examples of shorthand properties include `animation`, `flex`, `transition`, etc. – Tim Klein Mar 26 '19 at 18:48
  • Thank you so much for the explanation! Indeed, I've forgotten about the shorthandedness of `background`. – Eugene Barsky Mar 26 '19 at 18:59
  • Unfortunately the `radial-gradient` approach results in circles drawn without antialiasing. One alternative would be using a Houdini worklet to customize the painting process and draw them as shown in https://codepen.io/arnellebalane/pen/yLVOOgW however, as of early 2023, Houdini is only supported in Chromium-based browsers (not Firefox or Safari). – Keavon Mar 08 '23 at 04:48
15

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

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Very nice! Could you please explain do `at 2px 2px` and `1px` mean? – Eugene Barsky Mar 26 '19 at 19:53
  • 1
    @EugeneBarsky the `1px` is basically the radius of the circle (since we are using radial-gradient) so I should place the center of the circle at `2px 2px`, it could also be `1px 1px`, should give the same result .. here is an example with bigger value to better see : https://jsfiddle.net/ (radius 10px and we place the center at 10px 10px) – Temani Afif Mar 26 '19 at 19:58
  • 1
    @EugeneBarsky edited the answer to avoid confusion so we place it at `1px 1px` which is the radius ... and of course you can place it where you want (initially I made it 2px 2px to make it a bit far from the edge) – Temani Afif Mar 26 '19 at 20:00
  • Thank you for the explanations! Unfortunately the link to jsfiddle doesn't work. – Eugene Barsky Mar 27 '19 at 06:11