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

Web制作では、背景に画像を使用することが多くあります。そのようなとき、背景画像のサイズを変更することでデザインの幅が広がります。

背景画像を任意のサイズに指定するには、background-sizeプロパティを使用します。

この記事では、background-sizeプロパティの使い方を解説します。サンプルコードと出力結果を表示しながら解説していくので、学習にお役立てください。

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

background-imageで背景画像を指定する

背景画像を指定するには、background-imageプロパティを使用します。記述は以下のとおりです。

基本書式

 <div class="bg"></div>

.bg{
    background-image: url(..//img/草原の写真.jpg);
}

background-imageプロパティを使用すれば、背景画像のスタイルを効果的に変更できます。

background-imageプロパティの使い方はこちらの記事で詳しく解説しています。併せてお読みください。

【CSS】background-imageを使いこなす！背景画像の調整方法を解説　

background-sizeで指定できる値

背景画像の大きさを指定するには、background-sizeプロパティを使用します。

background-sizeに指定できる値は以下のとおりです。

background-sizeの使い方

auto

background-size: auto;は、背景画像を元の大きさのまま表示する指定です。

要素の大きさよりも画像が小さい場合、要素全体に画像が繰り返し表示されます。例えば640px×360pxの画像を1000px × 1000pxの要素内に表示すると、以下のようになります。

.bg {
    background-image: url(..//img/草原の写真.jpg);
    background-size: auto;
    height: 1000px;
    width: 1000px;
}

contain

background-size: contain;は、背景画像を要素の幅いっぱいに表示する指定です。要素の高さが画像よりも大きいとき、画像を要素内に繰り返し表示します。

出力結果を確認してみましょう。

.bg {
    background-image: url(..//img/草原の写真.jpg);
    background-size: contain;
    height: 1000px;
    width: 1000px;
}

cover

background-size: cover;は、要素の横幅・高さに合わせて背景画像を引き伸ばしたり、切り取ったりする指定です。

要素の大きさが画像より大きい場合は、要素の大きさに合わせて画像が引き延ばされます。一方、要素の横幅・高さが画像より小さい場合は、画像の余った部分が切り取られます。

要素が画像よりも大きい場合

.bg {
    background-image: url(..//img/草原の写真.jpg);
    background-size: cover;
    height: 1000px;
    width: 1000px;
}

要素が画像よりも小さい場合

.bg {
    background-image: url(..//img/草原の写真.jpg);
    background-size: cover;
    height: 300px;
    width: 300px;
}

数値+単位

background-sizeでは、任意の数値と単位で背景画像の大きさを指定できます。使用できる単位はpx、em、remなどです。

.bg {
    background-image: url(..//img/草原の写真.jpg);
    background-size: 300px;
    height: 1000px;
    width: 1000px;
}

%指定

background-sizeでは、%比率で背景画像の大きさを指定できます。

background-sizeの%指定は、「要素全体の横幅・高さに対しての割合」となります。例えばbackgrouns-size: 50%;の場合は、要素全体の横幅の50%、高さの50%の範囲に画像が表示されます。

出力結果を確認してみましょう。

background-size: 100%;

.bg {
    background-image: url(..//img/草原の写真.jpg)
    background-size: 100%;
    height: 360px;
    width: 640px;
}

background-size: 75%;

.bg {
    background-image: url(..//img/草原の写真.jpg);
    background-size: 75%;
    height: 360px;
    width: 640px;
}

background-size: 50%;

.bg {
    background-image: url(..//img/草原の写真.jpg);
    background-size: 50%;
    height: 360px;
    width: 640px;
}

background-size: 25%;

.bg {
    background-image: url(..//img/草原の写真.jpg);
    background-size: 25%;
    height: 360px;
    width: 640px;
}

横幅と高さを個別に指定

background-sizeに複数の値を記述すると、先に記述した値が横幅、後に記述した値が高さの指定となります。

background-size:20%/*横幅の値*/ 70%/*高さの値*/;

backgournd-sizeに関連するプロパティ

背景画像に関するプロパティは、background-sizeのほかに以下の2つがあります。

• background-position
• background-repeat

background-position

背景画像の表示位置を調整したいときには、background-positonプロパティを使用します。

background-positionプロパティに使用できる値は以下のとおりです。

background-repeat

background-imageで指定した画像は、要素内を埋めるように繰り返し表示される性質を持ちます。この繰り返しを制御するには、background-repeatプロパティを使用します。

background-repeatプロパティに指定できる値は以下のとおりです。

特に使用する機会が多いのはbackground-repeat: no-repeat;です。背景画像を繰り返し表示しないときにはbackground-repeat: no-repeat;を忘れずに指定しましょう。

背景画像が表示されないときの原因

backgournd-imageで背景画像を指定して、background-sizeでサイズを指定しても画像が表示されないことがあります。

例えば、以下のような記述だと背景画像が表示されません。

.bg {
    background-image: url(..//img/草原の写真.jpg);
    background-size: 100%;
}

この記述で画像が表示されない原因は、要素自体に高さが指定されていないからです。background-imageは、あくまで「背景」に画像を表示するプロパティです。そのため、要素そのものに高さを設定しないと画像が表示されません。

背景画像を使用するときには、必ず要素そのものにheightを指定しましょう。

まとめ

background-sizeは背景画像のサイズを指定するプロパティです。

background-sizeまとめ

• background-imageで指定した背景画像のサイズを変更できる
• auto、contain、cover、数値 + 単位、%指定が可能
• 要素が画像よりも大きい場合は画像を繰り返し表示する
• 画像の繰り返しをキャンセルするにはbackground-repeat: no-repeat;を指定する
• 要素自体に高さがないと背景画像が表示されない

背景画像のサイズを思い通りに変更できれば、デザインの幅が広がります。ぜひbackground-sizeを使いこなせるようになりましょう。

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー