背景画像が表示されないときは？

いちばん多い原因は、url()の中に書いた画像のパス（置き場所）のまちがいです。画像ファイルの名前と場所をもう一度確かめましょう。開発者ツールのNetworkタブで、画像が読み込めているかも確認できます。

imgタグとbackground-imageはどう使い分けるの？

内容として見せたい写真（人物・作品など）はimgタグ、飾りとしての背景（模様・雰囲気づくりの写真）はbackground-imageが目安です。imgタグの画像には代替テキストがつけられるので、意味のある画像はimgタグにしましょう。

background-colorで背景に色をしけることは学びました。じつは、色の代わりに画像をしくこともできます。ヒーローいっぱいに広がる写真、うっすら敷かれた模様——雰囲気のあるページの背景は、たいていこのbackground-imageの仕事です。

.hero {
  background-image: url("photo.png");
}

url()の中身は、<img>タグのsrcに書くパスと同じ書き方です。

背景画像は、何も言わないとタイルのようにくり返し敷きつめられます。

小さな画像が、すきまなくくり返されて「柄」になります。模様づくりには便利ですが、意図せずこうなって驚くことも。

くり返したくないときは、background-repeat: no-repeat;で1枚だけにできます。

.hero {
  background-image: url("photo.png");
  background-repeat: no-repeat;
}

背景写真でいちばんよく使うのが、要素いっぱいに広げる指定です。

.hero {
  background-image: url("photo.jpg");
  background-size: cover;
}

background-sizeは背景画像の大きさを決めるプロパティ。48pxのように数字でも指定できますが、まず覚えたいのはcover（カバー）です。

coverは「すきまが出ないように、画像を拡大縮小して覆いつくす」指定。background-position: centerを添えると、画像の中央が見えるように調整されます。