背景を変える

目次

背景色の変え方は文字のデザインのページで説明しました。このページでは、背景画像の使い方を中心に解説します。

• 背景画像
• 繰り返しのパターン
• 背景画像固定

背景画像

背景色を変えるにはbackground-colorプロパティを使いましたが、backgroundプロパティを使えば背景色のほかに背景画像、繰り返しパターンなどをまとめて指定できます。最初に背景画像をつけてみましょう。

.a {
background: white url("back.png");
}

background: の後ろに、背景色・背景画像を並べます。url()の中に背景にしたい画像ファイルのパスを記述します。絶対URLでも相対URLでもかまいませんが、相対URLにする場合はCSSファイルから見た画像ファイルの位置を記述してください。

上の例では、背景画像にback.pngを読み込み、背景画像が読み込めなかったときは白い背景になります。

.a {
background: white url("back.png"); /* 背景画像をback.png、背景色を白にして */
color: black;                      /* 文字色を黒にする */
}

繰り返しのパターン

繰り返しにはrepeat(縦横に繰り返し)、repeat-x、(横に繰り返し)、repeat-y(縦に繰り返し)、no-repeat(繰り返しなし)の4パターンがあります。このうちから一つをbackgroundプロパティの値に指定することができます。

a. { background: white url("star.png") repeat; }
b. { background: white url("star.png") repeat-x; }
c. { background: white url("star.png") repeat-y; }
d. { background: white url("star.png") no-repeat; }

背景画像固定

デフォルトでは、画面をスクロールすると背景画像も一緒にスクロールします。画面をスクロールしても背景画像を動かしたくないなら、backgroundプロパティの値にfixedを指定してください。

.a { background: white url("star.png") repeat fixed; }　/* 背景画像固定 */
.b { background: white url('star.png') repeat; } /* 背景画像もスクロール(デフォルト)*/

背景画像に派手な画像を使うと、目がちかちかしてとても文字の読みづらいページが完成してしまいます。背景画像を使うときは、文字の読みやすさに細心の注意を払ってくださいね。

まとめ

Information