Gradient over body is not covering entirely

[asasass]

I have the fence placed over the body here, and it’s not going down all the way.

Edit fiddle - JSFiddle - Code Playground

How is that fixed?

body {
  --color-a: blue;
  --color-b: black;
  --color-c: red;
  --color-d: black;

  background-size: 165px 165px;
  background-image:
}

body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px),
    linear-gradient(-45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px);
  background-size: 10px 10px;
}

The fence does not go all the way down as seen in the image.

[asasass]

Changing position to fixed worked: https://jsfiddle.net/o0w96Lsg/

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;