スタイルシートで縦方向のリピート素材は左右で違う

グラデーション素材をスタイルシートで縦方向へとリピートさせる場合、横方向へのリピートと比べて使い方が難しいようです。

横方向へのリピート:repeat-x;
縦方向へのリピート:repeat-y;

素材を縦方向へとリピートする場合、デフォルトでは一番左の列に縦方向へと一度だけリピートされるので、左側以外の中央や右側は素材が表示されません。

横方向の場合でも、一番上の列に横方向でリピートされるので、中央やフッターあたりには素材が表示されませんが、ホームページの場合、上下対称となっていなくても気にはなりませんが、左右対称でない場合は、多少アンバランスな感じがしてしまうものです。

そのようなわけで、あまりホームページで素材を縦方向でリピートさせるのは難しい気もしますが、当ブログでも左側はグラデーション素材なのですが、右側は似たような背景色を指定してのスタイルシートとなっています。

全面的にリピートさせてもよいのですが、いまいち出来栄えがよくなかったもので、似たような色彩でごまかした次第です。

そのような意味で、リピート素材を使用する場合、横方向へリピートさせる形で使用するか、もしくは、ホームページで全面的にリピートさせることをおすすめします。

縦横の全部の方向へとリピートさせる場合、素材によってはまだらになってしまったりする場合もありますので、左右反転させてくっつけるとかの工夫をしてみるとよいかと思います。