CSSのbackground-sizeで背景画像サイズを設定する方法を徹底解説!!

皆さんは、CSSで背景画像のサイズを変更する方法を知っていますか?背景画像を使うケースはよくあるので、サイズの指定方法を覚えておくと便利です!そこで今回は、

  • CSSで背景画像のサイズを指定するための、background-sizeプロパティとは?
  • background-sizeプロパティの使い方
  • レスポンシブに画像サイズを変更する方法
  • 画面サイズを画面最大幅まで広げる方法

といったように、基礎的なことから応用的な方法まで、徹底的に解説します!

background-sizeプロパティとは?

はじめに、background-sizeプロパティについて解説します。backgroud-sizeプロパティとは、背景画像のサイズを指定するプロパティです。

たとえば、次のような元画像を背景に設定し、background-sizeプロパティで背景画像のサイズを指定すると、次のように画面幅に収まるサイズで画像全体を表示・画面幅フルサイズで背景画像を表示などサイズを変えて表示することができます。

画面幅に収まるサイズで背景画像を表示:

画面幅フルサイズで背景画像を表示:

WEBアプリ・WEBサービスのトップ画面や、サービス紹介ページなどでよく使うため使い方を覚えておくと便利です!

ちなみに、本記事では背景画像のサイズを指定する方法を解説していくため、背景の設定そのものついてよくわからない方は、先に以下を見るのがおすすめです!

CSSのbackgroudはこれで完璧!見栄えが劇的に変わる手法
更新日 : 2019年7月7日

background-sizeプロパティの使い方

次に、background-sizeのプロパティの使い方について解説します。使い方は、次のとおりです。

使い方:

background-size:値

background-sizeプロパティに使う値一覧:

指定する値説明
auto自動算出します。基本は元画像の大きさそのままです。
contain元画像の縦横比は保持して、要素に元画像が全て収まるように調整してくれます。
cover元画像の縦横比は保持して、要素をちょうどよく覆うサイズにしてくれます。
数値(px)明示的にpxで大きさを調整します。
数値(%)要素に対しての割合で指定します。

WEBアプリのトップ画面では、coverを使って画面幅最大で画像を表示しているケースが多いです。それぞれどのような動きになるのか確認しながら使ってみるのがおすすめです。

とはいえ、言葉だけでは少しわかりにくため、中でもよく使われることが多い「contain」「cover」について、詳しく解説します!

background-sizeプロパティを使ったサンプルコード

次に、background-sizeプロパティを使ったサンプルコードをもとに、具体的な使い方を解説します。

画面の一部を背景画像に設定するサンプル

まず、表示領域に縦横比を維持したまま背景画像を表示するに設定する「background-size:contain」を指定したサンプルについて解説します。

サンプルコード - HTML:

<!DOCTYPE HTML>
<HTML lang="ja">
<head>
    <meta charset="UTF-8">
    <title>背景画像サイズサンプル</title>

    <link rel="stylesheet" href="main.CSS">
</head>

<body>
    <h2>背景画像サイズ指定サンプル</h2>
    <div class="part-img">
    </div>

</body>

</HTML>

サンプルコード - CSS:

.part-img{
    background-image:url(../shutterstock_1005938026.jpg);  /* 画像のURLを指定       */
    background-repeat:  no-repeat;                         /* 画像の繰り返しを指定  */              
    background-position:center center;                     /* 画像の表示位置を指定  */
    background-size:contain;                               /* 画像のサイズを指定    */
    width:100%;                                            /* 横幅のサイズを指定    */
    height:400px;                                          /* 縦幅のサイズを指定    */
}

実行結果:

「background-image:url(../img_sample.jpg)」で画像のパスを指定し、「background-repeat: no-repeat」画像の繰り返し表示を無しに設定します。

さらに「background-position:center center」で縦軸・横軸の表示位置を中央に指定し、「background-size:contain」で縦横比を維持した背景画像を表示しています。このように、簡単に背景画像のサイズを指定することができます。

画面幅最大で背景画像を表示するサンプル

次に、画面幅最大で背景画像を表示する「background-size:cover」を指定したサンプルについて、解説します。

サンプルコード - HTML:

<!DOCTYPE HTML>
<HTML lang="ja">
<head>
    <meta charset="UTF-8">
    <title>背景画像サイズサンプル</title>

    <link rel="stylesheet" href="main.CSS">
</head>

<body>
    <h2>背景画像サイズ指定サンプル</h2>
    <div class="full-img">
    </div>

</body>

</HTML>

サンプルコード - CSS:

.full-img{
    background-image:url(../img_sample.jpg); /* 画像のURLを指定       */
    background-size:contain;                 /* 画像のサイズを指定    */
    width:100%;                              /* 横幅のサイズを指定    */
    height:400px;                            /* 縦幅のサイズを指定    */
}

実行結果:

こちらも「background-image:url(../img_sample.jpg)」で画像のパスを指定し、「background-size:contain」でdivタグを覆うように背景画像を表示しています。このように、簡単に背景画像を画面幅最大に設定することができます。

背景画像のサイズだけでなく位置を変更する方法について

さきほど解説した画面幅最大のサンプルですが・・・画像がすこし切れて見えていますよね。

何らかの意図があれば良いのですが、そうでない場合は画像の表示位置を変えて意図が伝わるように変更するのがおすすめです!background-positionプロパティを使えば、以下のように表示位置を変更することができます!

表示位置変更イメージ:

変更後のCSS:

.full-img{
    background-image:url(../shutterstock_1005938026.jpg);  /* 画像のURLを指定     */
    background-position:center bottom;                     /* 画像の表示位置を指定 */
    background-size:cover;                                 /* 画像のサイズを指定  */
    width:100%;                                            /* 横幅のサイズを指定  */
    height:400px;                                          /* 縦幅のサイズを指定  */
}

実行結果:

bacground-sizeプロパティで背景画像の表示サイズ変更方法を覚えるのも大切ですが、あわせて背景画像の設定について網羅的に覚えておくのがおすすめです!

背景画像の設定に特化して以下記事で詳しくまとめているので、詳しく知りたい方はぜひ見てみてくださいね!

CSSのbackground-imageを使いこなす! 使い方から調整まで徹底解説
更新日 : 2019年7月31日

まとめ

今回は、background-sizeプロパティの概要・使い方について解説しました。背景画像のサイズ指定は、WEBアプリ開発をする際のトップ画面・アプリ紹介ページなどを作るときに使うケースが多いです。使い方も簡単なので、ぜひ使ってみてくださいね!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

Sanshiro Wakizaka

Sanshiro Wakizaka

新卒入社したメーカー系のIT企業で、システムエンジニアとして約5年勤務。
Webアプリ、業務アプリ開発において、要件定義、設計、インフラ、製造、テスト、運用保守など、様々な経験あり。
また、侍ブログ編集部として、これまでに200記事以上の記事を執筆。
現在はフリーランスエンジニア兼テックライターとして活動中。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説