スタイルシートで、半部ズラして背景を繰り返し

質問

スタイルシートで、半部ズラして背景を繰り返す事は可能でしょうか？

【】を配置するとして、

やりたいのは、↓のイメージです。
【】【】【】【】【】【】
】【】【】【】【】【】
【】【】【】【】【】【】
】【】【】【】【】【】

リピートさせると、↓こんな感じです。
【】【】【】【】【】【】
【】【】【】【】【】【】
【】【】【】【】【】【】
【】【】【】【】【】【】

回答No.3

sanzero · ベストアンサー

【】
】【

こういう素材をつくればいいです。

お礼

有難うございます。
横にくっつけるんじゃなくて、２列にして、下に付ければ良かったんですね。

回答No.5

tkmojo

【】
】【

これを作ってリピートすればいいのでは…？
ちょっと何を迷っているのかよくわかりませんね。

回答No.4

doraneko66

失礼致しました。素材ですね。

【】
】【
でリピートすると
【】【】【】【】【】【】
】【】【】【】【】【】【
【】【】【】【】【】【】
】【】【】【】【】【】【

となるので

【】
と
　】【　　←【】の横幅2倍

に分けて横幅の違う背景を二つ設定してしまう。とか

width
height
background-image(A, B);
background-size(A, B);
background-position(A, B);
background-repeat( repeat-x, repeat-x);

と二行だと４つ背景を設定することになるのかな。。。

かなり厳しいなぁ～

回答No.2

sanzero

そういう素材を作るしかないんじゃないかと思います。

お礼

どうやって作れますか？

半分ズレて配列される物をズレていないように素材を作るのは簡単です。

】【】【
これを半分ズラしで敷き詰めると
】【】【】【】【
】【】【】【
】【】【】【】【
】【】【】【
】【】【】【】【
となり、サイドはカットされるので、ズレていないのと同じになります。

でも、ズレていないものを半分ズレて配列されるように見せる素材が思いつきません。

回答No.1

doraneko66

出来るのでは？

ちょっと試してないけど、background-positionとかで
出来そうな気がしますけどね。

お礼

どうやったらできますか？