【CSS講座】背景のスタイルを設定する

前回は、リストのスタイルを変更する方法を紹介しました。

【CSS講座】リストのスタイルを変更する

2019年9月9日

今回は、背景のスタイルを設定する方法を紹介していきます。

背景のスタイルを設定する

ボックスモデルの記事を書いたときに紹介したのですが、各要素を箱としてイメージするとわかりやすいです。

ここは、HTML5 らしく headerタグを定義して、スタイルを設定していきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>ぱそたのCSS講座</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header></header>
</body>
</html>

とりあえず、下記のような感じで headerタグに対して高さを指定しておきましょう（中身がないので）。

header {
    height: 100px;
}

背景に色を設定する

背景に色を設定するには、background-color というプロパティを使います。

background-color:#ff0000;

といった感じで色を指定することができます。

背景画像を設定する

背景画像を設定するには、background-image というプロパティを使います。

background-image:url(画像ファイルのパス);

背景画像のサイズを指定する

背景画像のサイズを指定するには、background-size というプロパティを使います。

auto: 自動的に算出される（初期値）。
contain: 縦横比は保持して、背景領域に収まる最大サイズになるように背景画像が拡大縮小される。
cover: 縦横比は保持して、背景領域に収まる最小サイズになるように背景画像が拡大縮小される。

説明するのが難しいので実際にコードを書いてみます。

ちなみに利用する img01.gif の画像サイズは、240 × 64 です（単位はピクセル）。

header{
  height:100px;
  background-color:green;
  background-image:url(../img/img01.gif);
  background-size:auto;
  background-repeat:no-repeat;
  background-position:center;
}

まずは、auto の説明から。

まず、background-repeat ですが、no-repeat とすることで繰り返し表示されないようにしています。

続いて、background-position ですが、center とすることで要素の真ん中に表示されるように指定しています。

結果は以下の通りです。

拡大も縮小もされず、自動算出され、基本は元の画像サイズのまま表示されるわけです。

header{
  height:100px;
  background-color:green;
  background-image:url(../img/img01.gif);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}

続いて、contain です。

height が 100px で指定しています。

しかし、画像の高さは 64px です。

したがって、contain により少し拡大されているわけです。

要素の大きさ（この場合、高さ）が変化することで画像の拡大率も変化するわけです。

header{
  height:100px;
  background-color:green;
  background-image:url(../img/img01.gif);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
}

最後に cover について。