Css background: offset for repeating-linear-gradient

I have drawn a grid as a repeating background of a <div> the following way in SASS:

background-image:
  repeating-linear-gradient(0deg, $major-grid-color, $major-grid-color $major-grid-weight, transparent $major-grid-weight, transparent $major-grid-size),
  repeating-linear-gradient(-90deg, $major-grid-color, $major-grid-color $major-grid-weight, transparent $major-grid-weight, transparent $major-grid-size),
  repeating-linear-gradient(0deg, $minor-grid-color, $minor-grid-color $minor-grid-weight, transparent $minor-grid-weight, transparent $minor-grid-size),
  repeating-linear-gradient(-90deg, $minor-grid-color, $minor-grid-color $minor-grid-weight, transparent $minor-grid-weight, transparent $minor-grid-size);

It renders the following way:

But I want it to render with an offset of 15px to the left (or an offset of 4 * $minor-grid-size + 15px to the right), ie:

Now I can't use margin-left, because it will also offset the elements inside of the <div> tag and I don't want that, see the Fiddle here (don't pay attention to the JS).

I only want the background to have an offset.

You might use background-position property.

.repeating-grid {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  background-size: $major-grid-size $major-grid-size;
  background-image:
    repeating-linear-gradient(0deg, $major-grid-color, $major-grid-color $major-grid-weight, transparent $major-grid-weight, transparent $major-grid-size),
    repeating-linear-gradient(-90deg, $major-grid-color, $major-grid-color $major-grid-weight, transparent $major-grid-weight, transparent $major-grid-size),
    repeating-linear-gradient(0deg, $minor-grid-color, $minor-grid-color $minor-grid-weight, transparent $minor-grid-weight, transparent $minor-grid-size),
    repeating-linear-gradient(-90deg, $minor-grid-color, $minor-grid-color $minor-grid-weight, transparent $minor-grid-weight, transparent $minor-grid-size);

  background-position: 15px 0;
}