素材のスタイルシートへの組み込み方法

グラデーション素材のスタイルシートへの組み込み方法は、背景画像へのリピート素材として使用する方法が一般的です。

スタイルシートへの追加方法

background-image: url(素材のＵＲＬ);
background-repeat: repeat;

このrepeatの値を変化させることで、繰り返しの表示方法を変えることができます。

• background-repeat: repeat; 縦と横方向に素材をリピートで表示
• background-repeat: repeat-x; 横方向に背景素材をリピート
• background-repeat: repeat-y; 縦方向への繰り返し表示
• background-repeat: no-repeat; 一度だけの表示で繰り返さない。

グラデーション素材の場合、両端で色彩が違いますので、背景画像をリピートにするとまだらになってしまいます。

ですので、画像加工で反転させて両端を同じ色彩にするとか、一度だけ表示させてから、あとは同じような色彩を表示させるとかの方法がおすすめです。