CSSのbackgroundプロパティの使い方

CSSを勉強し始めたばかりの人でも「background-color」や「background-image」は使う頻度も高く、なんとなく使いこなせる人が多いのではないでしょうか。今回はその２つ以外にも背景に関する指定が行える「background」プロパティについてご紹介します。

background-color:の使い方

「background-color」は、背景の色を指定します。上記の例だと、背景色を黒に指定しています。

背景色を指定するときは、文字色も読みやすい最適な色に指定するようにしましょう。デフォルトのままだと、ユーザーの設定で背景色と文字色のバランスが悪くなり読みにくくなってしまう場合があるからです。

background-image:の使い方

「background-image」は背景の画像を指定します。上記の例だと、「images」という名前のファイルの中にある「sample.png」という名前の画像ファイルを指定しています。

ちなみに、「border」や「background-color」と一緒に使用することも可能です。その場合ボーダーは画像の上、背景色は画像の下に反映されるようになります。

また不透明な画像を指定して背景色が見えなくなってしまう場合でも、画像を読み込むことができなかったときに備えて、代わりに表示する「background-color」を指定しておきましょう。

background-repeat:の使い方

「background-repeat」は背景画像の繰り返し方法を指定します。「background-repeat」を指定しないと、上のように画像が縦横方向に繰り返し表示されてしまいます。

「background-repeat:repeat-x;」を指定すると横方向（x方向）のみに繰り返されます。「background-repeat:repeat-y;」を指定すると縦方向（y方向）のみに繰り返されます。

「background-repeat:no-repeat;」を指定すると画像が繰り返されなくなるため、一枚だけ表示されるようになります。

background-position:の使い方

「background-position」は、背景画像の位置を指定します。「background-repeat:no-repeat;」と一緒に使われることが多いです。何も指定がない場合はmargin:0（左上）の状態になります。

top→上に配置

bottom→下に配置

right→右に配置

left→左に配置

center→中央に配置

「background-position:top center;」を指定することで、上寄りの中央に画像が配置されました。

もっと全体的に中央に寄せたいなど細かい位置の調整がしたい場合は、pxや％を使って指定することも可能です。

background-attachment:の使い方

「background-attachment」はスクロールしたときに背景画像の位置を指定します。「fixed」は背景画像の位置を固定する指定ですので、上記の例だとスクロールしても画像がずっと画面の真ん中にあり続けます。「scroll」を指定すると、スクロールに伴って画像も移動するようになります。

background:の使い方

ここまで様々な「background」プロパティの使い方をご紹介してきましたが、「background:」のみで省略して記述することもできます。

順番や特に指定のない部分の省略は特に気にする必要はありません。