How to use repeating gradient in place of linear-gradient

Question

I have this linear-gradient code here. https://jsfiddle.net/0qfy3ks2/

How would I have it use a repeating gradient instead?

So the image is the same, just using a repeating gradient instead.

background-image: repeating-linear-gradient

The repeating gradient doesn’t use background-size as that breaks the repeating pattern.

.test {
  width: 100px;
  height: 100px;
  background-image: 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;
}

<div class="test"></div>

Answer 1

You could do something like this? You can change the size by changing the px values:

.test {
  width: 100px;
  height: 100px;
  background-size: 8px 8px;
  background:
    repeating-linear-gradient(45deg,
      transparent,
      transparent 4.5px,
      rgba(0, 0, 0, .75) 5px,
      transparent 5.5px,
      transparent 7px),
    repeating-linear-gradient(-45deg,
      transparent,
      transparent 4.5px,
       rgba(0, 0, 0, .75) 5px,
      transparent 5.5px,
      transparent 7px);
}

<div class="test"></div>