背景画像の表示方法の違い（background-sizeについて）

2019/07/08

書いた人：: rurippa!
カテゴリ：: CSS
：: css コーディング
5,993 views

背景画像の表示（background-sizeプロパティ）について、説明します。

背景画像の表示の仕方を指定できるbackground-sizeプロパティについて、違いを確認しましょう。

プロパティの概要について

background-sizeのプロパティ

auto	初期値。そのままの画像サイズで表示される。
contain	画像の比率はそのまま、画像全体が収まるように表示される。
cover	画像の比率はそのまま、背景画像の枠が埋まる状態で表示される。（画像が見切れる場合あり）
px、％	指定のpxや%に応じて、画像サイズを指定できる。

サンプル一覧

今回使う画像と、HTML/CSSはこちら。

    <!-- 空のdivを用意しました -->
    <div class="sample"></div>

    .sample{
      width: 300px;
      height: 150px;
      border: 1px solid #333; /*わかりやくするため、ボーダー引いてます。*/
      background-image: url(https://taneppa.net/wp-content/uploads/2019/05/cat_sample.jpg);
      background-repeat: no-repeat;
    }

autoについて

初期値です。そのままの画像サイズで表示されるため、表示エリアに画像が入りきらない場合は切れてしまいます。

    .sample{
      background-size: auto;
    }

containについて

画像の比率はそのまま、画像全体が収まるように表示されます。
下記の例では、幅に余裕があったため表示エリアの右側も余白ができています。

    .sample{
      background-size: contain;
    }

coverについて

画像の比率はそのまま、背景画像の枠が埋まる状態で表示されます。そのため、表示エリアの比率が、画像と異なる場合は画像が切れてしまうので気をつけてください。

    .sample{
      background-size: cover;
    }

%やpxについて

％やpxを指定することで、画像の表示サイズを指定することができます。
今回は50%と指定していますが、表示エリアの大きさに対しての50%のサイズになります。

    .sample{
      /*background-size: よこ たて*/
      background-size: 50% auto;
    }

注意点

極端な例ですが、background-sizeの値を、横幅も高さも画像の比率に合わない数値の場合、比率が崩れます。
もし比率を保ちたい場合は、どちらかにautoを指定してくださいね。

    .sample{
      background-size: 200px 50px;
    }

最後に

今回は、background-sizeに絞って紹介しました。これに加えて、調整が必要なときは、background-positionなどで調整してみてくださいね。
興味があれば、「背景画像の比率を保ったまま、レスポンシブ対応する」こちらの記事も読んでみてください(^^)