cssで横方向へ背景素材をリピート

グラデーション素材をスタイルシートへ背景素材として組み込む方法として、縦方向と横方向があったりしますが、オレンジ色のグラデーションを例にこのホームページへ組み込んでみました。

方法としては、当ホームページのグラデーション素材を、「右クリック - 画像を保存」でダウンロードし、ウィンドウズ付属のペイントで小さめに加工し、90度回転させます。

すると、だいたいこんな感じになるかと思います。

グラデーション素材サンプル

次にスタイルシートの組み込みたい箇所へ次の文字列を入力します。

background-image: url(素材のURL);
background-repeat: repeat-x;

例えば、このホームページのスタイルシートの body の箇所に組み込んだ場合、こんな感じになります。

cssへの組み込み例

ちなみに、グラデーション素材自体は小さめのものでも大丈夫みたいですが、どのくらいの大きさが適当なのかとか、画像ファイルは jpg や bmp などどれが適しているのかとか、詳しいことはわかりません。

一般的に、bmp ファイルはあまりホームページ素材としてはよくないようなんで、jpg あたりがいいのではないかなって気もします。