CSS背景画像を使用して、オフセット付きグラデーションを使用してグリッドを出力する

Question

CSSを使用して背景グリッドを出力する必要があります。私はそうするためにrepeating-linear-gradient()機能を使うことができた、それは素晴らしい表示されます

：

その後、しかし、私は100pxに水平軸上のグリッドをシフトする必要があります。

私がそうするbackground-positionプロパティを追加しました：

しかし、最終的には、それは私に奇妙な結果を与えます。無関係の垂直線が描画されます。

興味深いことに、この行はコンピュータ画面に固定されているため、その行のサイズを変更すると、この行はその行とともに移動していないことがわかります。 I've recorded a video to demonstrate。

なぜそれが正確に起こっているのですか？この動作にどう対処すればよいですか？

このようなグリッドをオフセットでずらして描画する方法はありますか？

Please, take a look at this JSFiddle。

: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; 
} 

Answer 1

をあなたが代わりにrepeating-linear-gradientのbackground-sizeと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; 
} 

Answer 2

私はこのアーティファクトの原因は本当にわからないんだけど、ここで

とは、私が使用しているコードです最初は、おそらくそれは何とか背景のサイズに関係しています。

最後に、私は両方の背景イメージのため、以下のCSSプロパティを追加することで、この問題を克服するために管理している：この場合

background-size: 200px 200px, 200px 200px;