• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

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

投稿者アイコン
2019/07/08
書いた人:
rurippa!
カテゴリ:
CSS
6,628 views

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

背景画像の表示方法の違い(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などで調整してみてくださいね。
興味があれば、「背景画像の比率を保ったまま、レスポンシブ対応する」こちらの記事も読んでみてください(^^)


この記事を読んだ人はこんな記事も読んでいます