【HTML&CSSのきほん】背景画像を繰り返す方法。

　　　

おはようございます。おーみんです。

現在HTML&CSSの勉強中です。

今回の記事ではCSSを用いて背景画像を繰り返す方法を書いていこうと思います。

教本紹介

使っている教本はこちら

『HTML&CSSのきほん』狩野祐東 著  1900円+税

背景画像の繰り返し

背景画像の繰り返しと言葉で説明しても伝わらないと思うので実物を載せてみます。

・・・ん？

と思うかもしれませんが、これは

の繰り返しで出来ています。

繰り返し機能を用いることで、いちいち長い画像を最初から用意しておく必要がないんですね。

背景画像を繰り返す方法

方法は簡単です。

CSSのスクリプトに"background-repeat:"を用いましょう。

もちろん縦に繰り返すのか、横に繰り返すのかで書き方も変わってくるので以下により詳しく書いていきます。

横方向に繰り返す方法

画面横に繰り返す場合は

background-repeat: repeat-x;

としてください。

縦方向に繰り返す方法

画面縦に繰り返す場合は

background-repeat: repeat-y;

としてください。

最後に

背景画像の繰り返しは主にヘッダーやフッターなどの区切りとして使うことが多いと思います。

ぜひ参考になれば嬉しいです。