Search code examples
htmlcssbackgroundbackground-image

Using CSS background image to output grid using gradient with offset

I need to output a repeating background grid using CSS.

I've managed to use the repeating-linear-gradient() function in order to do so, and it's displayed great:

Then, however, I need to shift the grid on horizontal axis by 100px.

I've added background-position property to do so:

But, in the end, it gives me a weird result. Some extraneous vertical line is drawn.

Interestingly enough, this line is fixed to the computer screen, so if you resize that window, you can see that this line is not moving with it. I've recorded a video to demonstrate.

Why is it happening exactly and how do I counter this behavior?

Is there some alternative way to draw such a grid shifted by offset?

Please, take a look at this JSFiddle.

And here's the code I'm using:

:root {
  --background-grid-color: deeppink;
  --background-fill-color: #000;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  /* Vertical lines */
  background-color: var(--background-fill-color);
  background-image:
    repeating-linear-gradient(
      to right,
      var(--background-grid-color) 0,
      var(--background-grid-color) 1px,
      transparent 1px,
      transparent 200px
    ),
    repeating-linear-gradient(
      to bottom,
      var(--background-grid-color) 0,
      var(--background-grid-color) 1px,
      transparent 1px,
      transparent 200px
    )
  ;
  background-position: 100px 0, 0 0;
}
Solution

  • You can fix it by using background-size and linear-gradient instead of repeating-linear-gradient:

    :root {
  --background-grid-color: deeppink;
  --background-fill-color: #000;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  /* Vertical lines */
  background-color: var(--background-fill-color);
  background-image:
    linear-gradient(
      to right,
      var(--background-grid-color) 0,
      var(--background-grid-color) 1px,
      transparent 1px,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      var(--background-grid-color) 0,
      var(--background-grid-color) 1px,
      transparent 1px,
      transparent 100%
    )
  ;
  background-position: 100px 0, 0 0;
  background-size: 200px;
}