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:

[![Bad](https://i.stack.imgur.com/FiRFI.png)](https://i.stack.imgur.com/FiRFI.png)

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:

[![enter image description here](https://i.stack.imgur.com/xKD76.png)](https://i.stack.imgur.com/xKD76.png)

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](https://jsfiddle.net/LoveMetal/Lr2hnfbk/33/) (don't pay attention to the JS). 

I only want the background to have an offset.