スタイルシートで背景を設定する
”背景”はＨＴＭＬだけでも設定することができるのですが、スタイルシートで背景を設定しておいて外部ＣＳＳに保存しておくと、一度にたくさんのページの背景を変更することができて効率的です。
背景はほとんど全てのタグに設定することができます。例えば、「div」に赤色の背景、「p」に青色の背景を設定すれば、基本背景は赤で文字を表示する部分だけ青色の背景が表示されます。
- background-color (背景にワントーンの色を付ける)
- background-image (背景に画像を設定する)
- background-repeat (背景の繰り返しの設定)
- background-position (背景画像の表示位置の設定)
背景の繰り返しを設定する
前ページのように背景画像を設定した場合、背景画像はそのタグのなかで繰り返し表示されます。
でも、場合によっては背景画像を一回だけ表示したい時や、縦方向・横方向に表示したい時もありますよね。
そういう場合もCSSで指定をしてあげることができます。
セレクタ{background-repeat:繰り返し方法}
上のようなスタイルシートを記述して『繰り返し方法』の部分を下の表の単語に置き換えればOKです。
| 名 称 | 説 明 |
|---|---|
| repeat | 繰り返し表示（標準設定） |
| no-repeat | 繰り返さずに1回だけ表示 |
| repeat-y | 縦方向に繰り返し |
| repeat-x | 横方向に繰り返し |
＜記述例①＞～くり返し無し(1回だけ表示)～
body{
background-image:url(背景画像URL);
background-repeat: no-repeat;
}
＜記述例②＞～縦方向に繰り返し～
body{
background-image:url(背景画像URL);
background-repeat: repeat-y;
}
＜記述例③＞～横方向に繰り返し～
body{
background-image:url(背景画像URL);
background-repeat: repeat-x;
}
繰り返し方法は４つですが、初期設定(何も指定しない時)の繰り返し表示を除けば、3種類だけなので覚えやすいと思います。
それでは、次は背景画像を設置する位置についてお話しします。
 |
 |
 |
|---|
