背景の指定は種類が多いのですが、日常的に使うものは限られています。まずは色から始めて、画像、グラデーションと足していきましょう。

色だけなら1行

style.css
.card {
  background-color: #e3f0ff;
}

/* background だけでも同じ意味になる */
.card {
  background: #e3f0ff;
}

背景画像でよく使う4つ

  • background-image … 画像を指定する。url() で囲む
  • background-size … 大きさ。cover か contain がほぼすべて
  • background-position … 表示する位置。center が無難
  • background-repeat … 繰り返すかどうか。no-repeat で止める

背景画像を指定して「同じ絵がタイルのように並んでしまった」という経験はありませんか。あれは初期状態が「繰り返す」だからです。no-repeat を書けば止まります。

cover と contain の違い

  • cover … 領域いっぱいを埋める。はみ出した部分は切れる
  • contain … 画像全体が見えるように収める。すき間ができることがある

写真を背景に敷きたいときは cover、ロゴなど全体を見せたいときは contain です。迷ったら cover を選べば、たいていうまくいきます。

CODEcover と contain を比べるコードを書き換えると、すぐ下で動きます

background-size を contain に書き換えてみてください。画像の見え方が変わります。（画像はCSSだけで作った模様を使っています）

グラデーション

グラデーションは、画像ではなく background-image の一種として指定します。linear-gradient は直線的な変化で、角度と色を並べて書きます。

CODEグラデーションを作るコードを書き換えると、すぐ下で動きます

角度（135deg）や色を変えてみてください。色は3つ以上並べることもできます。

背景の上に文字を置くときの注意

写真の上に白い文字を置くと、明るい部分で読めなくなります。対策は、背景と文字の間に半透明の暗い層を挟むことです。グラデーションを重ねて書くだけで実現できます。

写真の上に文字を置くときの定番
.hero {
  /* カンマで区切ると重ねられる。先に書いたほうが手前 */
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
    url("hero.jpg");
  background-size: cover;
  background-position: center;
  color: #fff;
}

この「重ねられる」性質を知っておくと、写真の上の文字が読めない問題は必ず解決できます。

背景色は文字色とセットで指定する

背景色だけを指定して文字色を書かないと、環境によっては読めない組み合わせになることがあります。背景色を変えたら文字色も一緒に指定する、を習慣にしてください。