【CSS】background-sizeで背景画像のサイズを調整する方法

Webサイトに背景を指定する際は、CSSを使用します。背景は大きく分けると、背景色と背景画像の2種類です。

背景色は「background-color」、背景画像は「background-image」で指定します。

今回紹介する「background-size」は、background-imageとあわせて用いるプロパティです。

背景画像のサイズを自由に調整できます。任意の大きさを指定したり、要素の大きさに合わせたりと、方法はさまざまです。

本記事では、background-sizeの使用法をまとめたので、ぜひ参考にしてください。

background-sizeの基本的な使い方

前述の通り、backgroud-sizeはbackground-imageで指定した背景画像のサイズを指定するプロパティです。

background-sizeだけでは意味をなさず、同じ要素にbackground-imageを指定することで初めて機能します。

以下のような記述法です。

CSS
div {
background-image:url(sample.png); /*背景画像を指定*/
background-size:100px; /*背景画像のサイズ指定*/
}

このように、必ず背景画像の指定とセットで記述してください。

これはdivにsample.pngという画像を、幅100ピクセルの背景画像として表示させるという記述です。

background-sizeの値

上のコードではbackground-sizeに100pxという値を指定しました。

background-sizeには他にもさまざまな値があるので1つずつ紹介していきます。

auto

元画像のサイズのままで表示されます。

CSS
div {
background-image:url(sample.png); /*背景画像を指定*/
background-size:auto; /*背景画像のサイズ指定*/
}

初期値なので、あえて指定する必要はありません。

要素の大きさに関係なく、画像の大きさそのままで表示されます。

例えば、以下のような横幅500ピクセルの画像があったとします。

横幅500ピクセル以上の要素に背景画像として指定するのであれば、そのまま表示されます。

CSS
div {
width:550px; /*要素の幅指定*/
height:375px; /*要素の高さ指定*/
background-color:gray; /*背景色指定*/
background-image:url(sample.png); /*背景画像を指定*/
background-repeat:no-repeat; /*背景画像を繰り返さないよう指定*/
background-size:auto; /*背景画像のサイズ指定*/
}

背景550ピクセルの要素に、上の画像を背景として指定する記述です。高さは画像と同じ375ピクセルとしています。

要素の範囲が分かりやすいよう、背景色も設定しました。

また、背景画像はデフォルトだと繰り返されるように設定されているので、「background-repeat:no-repeat」で繰り返さないように指定しています。

このように550ピクセルのグレーの領域の中に、500ピクセルの画像が収まっています。

では、要素の大きさが、画像より小さい場合はどうなるでしょうか。

CSS
div {
width:400px; /*要素の幅指定*/
height:375px; /*要素の高さ指定*/
background-color:gray; /*背景色指定*/
background-image:url(sample.png); /*背景画像を指定*/
background-repeat:no-repeat; /*背景画像の繰り返しを解除*/
background-size:auto; /*背景画像のサイズ指定*/
}

要素の大きさを400ピクセルにしました。

右側の大きなビルが切れて写っていません。

画像が500ピクセルなのに対し、要素が400ピクセルなので、収まりきっていないのです。

このように要素の大きさに関係なく、画像の大きさがそのまま反映されるのがautoです。

今回は375ピクセルで固定しましたが、高さも横幅と同様に要素よりも小さければそのまま収まります。

しかし、要素よりも大きい場合は画像が途中で切れてしまいます。

ピクセル

画像の大きさをpxで指定します。

CSS
div {
width:550px; /*要素の幅指定*/
height:375px; /*要素の高さ指定*/
background-color:gray; /*背景色指定*/
background-image:url(sample.png); /*背景画像を指定*/
background-repeat:no-repeat; /*背景画像の繰り返しを解除*/
background-size:500px; /*背景画像のサイズ指定*/
}

画像のサイズを500ピクセルに指定しました。

値が1つだけの場合は幅の指定として解釈され、それに対応して縮尺が崩れないよう変化します。

値が2つの場合は、幅と高さという指定になります。

CSS
div {
width:550px; /*要素の幅指定*/
height:375px; /*要素の高さ指定*/
background-color:gray; /*背景色指定*/
background-image:url(sample.png); /*背景画像を指定*/
background-repeat:no-repeat; /*背景画像の繰り返しを解除*/
background-size:500px 200px; /*背景画像のサイズ指定*/
}

幅が500ピクセルで高さが375ピクセルの画像を、幅500ピクセルで高さが200ピクセルに指定しました。

このように画像の元々の縮尺を無視して表示されます。基本的に横幅だけを指定しておけばよいでしょう。

以下のような記述もできます。

CSS
div {
width:550px; /*要素の幅指定*/
height:375px; /*要素の高さ指定*/
background-color:gray; /*背景色指定*/
background-image:url(sample.png); /*背景画像を指定*/
background-repeat:no-repeat; /*背景画像の繰り返しを解除*/
background-size:500px auto; /*背景画像のサイズ指定*/
}

高さをautoにすることで、幅の縮尺に合わせられます。

高さを指定し、幅をautoにするということも可能です。

パーセント

画像のサイズを%で指定します。

これは画像の大きさに対する割合ではなく、要素の大きさに対する割合です。

CSS
div {
width:600px; /*要素の幅指定*/
height:375px; /*要素の高さ指定*/
background-color:gray; /*背景色指定*/
background-image:url(sample.png); /*背景画像を指定*/
background-repeat:no-repeat; /*背景画像の繰り返しを解除*/
background-size:100%; /*背景画像のサイズ指定*/
}

元の幅が500ピクセルの画像を、幅が600ピクセルの要素に対して100%で指定しました。

500ピクセルの画像が、要素の幅いっぱいの600ピクセルで表示され、少々画質が粗くなっています。

ピクセル指定と同様、値が1つだけの場合は数値が反映されるのは幅です。

値が2つの場合は、1つめが幅、2つ目が高さとなります。

CSS
div {
width:600px; /*要素の幅指定*/
height:375px; /*要素の高さ指定*/
background-color:gray; /*背景色指定*/
background-image:url(sample.png); /*背景画像を指定*/
background-repeat:no-repeat; /*背景画像の繰り返しを解除*/
background-size:auto 100%; /*背景画像のサイズ指定*/
}

幅をautoにして、高さを100%で指定しました。

画像が要素の高さに合わせて表示されているので、幅は小さくなっています。

100%だけでなく、細かな数値を指定することも可能です。

CSS
div {
width:600px; /*要素の幅指定*/
height:375px; /*要素の高さ指定*/
background-color:gray; /*背景色指定*/
background-image:url(sample.png); /*背景画像を指定*/
background-repeat:no-repeat; /*背景画像の繰り返しを解除*/
background-size:50% ; /*背景画像のサイズ指定*/
}

サイズを50%に指定しました。

画像が要素の幅の50%、つまり300ピクセルで表示されています。

ピクセル指定のように画像のサイズを厳密に指定するのではなく、要素の大きさを基準としているので、要素の大きさが可変のときなどに便利です。

contain

要素に元画像がすべて収まるようにするという指定です。

CSS
div {
width:400px; /*要素の幅指定*/
height:375px; /*要素の高さ指定*/
background-color:gray; /*背景色指定*/
background-image:url(sample.png); /*背景画像を指定*/
background-repeat:no-repeat; /*背景画像の繰り返しを解除*/
background-size:contain; /*背景画像のサイズ指定*/
}

幅が500ピクセルで高さが375ピクセルの画像を、幅が400ピクセルで高さが375ピクセルの要素に指定すると次のようになります。

幅を400ピクセルに合わせた分、高さが小さくなって下が余っています。

画像がすべて収まるようにするという指定なので、横に合わせるだけとは限りません。

CSS
div {
width:550px; /*要素の幅指定*/
height:275px; /*要素の高さ指定*/
background-color:gray; /*背景色指定*/
background-image:url(sample.png); /*背景画像を指定*/
background-repeat:no-repeat; /*背景画像の繰り返しを解除*/
background-size:contain; /*背景画像のサイズ指定*/
}

高さを275ピクセルに設定しました。

高さを小さく合わせた分、横が余っています。

このように要素の幅か高さに合わせ、全体が表示されるようにするというのがcontainという値です。

cover

要素の全域が、背景画像に覆われるという指定です。

CSS
div {
width:400px; /*要素の幅指定*/
height:375px; /*要素の高さ指定*/
background-color:gray; /*背景色指定*/
background-image:url(sample.png); /*背景画像を指定*/
background-repeat:no-repeat; /*背景画像の繰り返しを解除*/
background-size:cover; /*背景画像のサイズ指定*/
}

要素の幅を画像より小さい400ピクセルに指定しました。containの場合は画像の全体が収まるように表示されるため、画像の幅も400ピクセルになり、高さが余ります。

それに対してcoverは余りが出ないようにするという指定なので、次のような表示になります。

画像の右側が切れていますが、要素の中に背景画像で覆われていない部分はありません。

どんな場合でも、要素の全域が画像で覆われます。

CSS
div {
width:600px; /*要素の幅指定*/
height:375px; /*要素の高さ指定*/
background-color:gray; /*背景色指定*/
background-image:url(sample.png); /*背景画像を指定*/
background-repeat:no-repeat; /*背景画像の繰り返しを解除*/
background-size:cover; /*背景画像のサイズ指定*/
}

要素の幅を、画像の幅より大きな600ピクセルに指定しました。

画像も600ピクセルで表示されます。

拡大された分、画質が粗くなってしまうので要素よりも小さな画像を指定するときは気を付けてください。

coverはレスポンシブデザインなどで、常に背景画像が途切れないようにしたいときによく使われています。

background-positionとの併用

background-positionとは、背景画像を表示させる位置を指定するプロパティです。

横位置と縦位置を指定できます。

CSS
div {
width:600px; /*要素の幅指定*/
height:375px; /*要素の高さ指定*/
background-color:gray; /*背景色指定*/
background-image:url(sample.png); /*背景画像を指定*/
background-repeat:no-repeat; /*背景画像の繰り返しを解除*/
background-size:300px ; /*背景画像のサイズ指定*/
background-position:right bottom; /*背景画像の表示位置指定*/
}

幅300ピクセルの背景画像をbackground-positionでright bottomと設定しました。

横位置が右、縦位置が下で表示されます。

このようにサイズを調整した画像を任意の位置に表示させることが可能です。横位置はleft、center、right、縦位置はtop、center、bottomが指定できます。

3つの位置指定だけでなく、数値も使えます。

CSS
div {
width:600px; /*要素の幅指定*/
height:375px; /*要素の高さ指定*/
background-color:gray; /*背景色指定*/
background-image:url(sample.png); /*背景画像を指定*/
background-repeat:no-repeat; /*背景画像の繰り返しを解除*/
background-size:300px ; /*背景画像のサイズ指定*/
background-position:right 50px bottom 100px; /*背景画像の表示位置指定*/
}

これは右から50ピクセル、下から100ピクセルという指定です。

このように、画像を要素の端につかない自由な位置に配置できます。

right、bottom等の指定がなく、数値のみを記述した場合は、横が左から、縦が上からの距離と解釈されます。

画像が要素よりも大きい場合にも、使用可能です。

CSS
div {
width:400px; /*要素の幅指定*/
height:375px; /*要素の高さ指定*/
background-color:gray; /*背景色指定*/
background-image:url(sample.png); /*背景画像を指定*/
background-repeat:no-repeat; /*背景画像の繰り返しを解除*/
background-size:cover; /*背景画像のサイズ指定*/
}

これはカバーで要素の全域に画像を表示させるという指定です。

要素の幅が狭いので、画像の右側が収まっていません。

CSS
div {
width:400px; /*要素の幅指定*/
height:375px; /*要素の高さ指定*/
background-color:gray; /*背景色指定*/
background-image:url(sample.png); /*背景画像を指定*/
background-repeat:no-repeat; /*背景画像の繰り返しを解除*/
background-size:cover; /*背景画像のサイズ指定*/
background-position:right top; /*背景画像のサイズ指定*/
}

横位置をrightに指定しました。

画像が右端から開始され、収まりきらないのが左側になっています。

このように画像の配置位置を指定することで、どの部分を表示させるかを選べます。

複数の背景画像

背景画像は、1つの要素に複数指定することが可能です。

background-sizeも個別に指定できます。

CSS
div {
width:600px; /*要素の幅指定*/
height:375px; /*要素の高さ指定*/
background-color:gray; /*背景色指定*/
background-image:url(sample.png) , url(sample2.png); /*背景画像を指定*/
background-repeat:no-repeat; /*背景画像の繰り返しを解除*/
background-size:300px , 250px; /*背景画像のサイズ指定*/
background-position:right top , left bottom; /*背景画像のサイズ指定*/
}

このように「,」で区切って複数指定しています。

background-size、background-positionも「,」で区切って複数指定することで、背景画像の順番に対応して適用されます。

ショートハンドに注意

ショートハンドとは、1つのプロパティに複数の値を指定することです。

backgroundは以下のような記述が可能です。

CSS
div {
background:gray url(sample.png) no-repeat right top;
}

背景色、背景画像、背景画像の繰り返し、背景画像の表示位置を一括で指定しています。

background-color、background-image、background-repeat、background-positionと1つずつ指定するものをbackgroundという1つのプロパティに集束できるのです。

background-sizeもbackgroundにまとめられますが、記述法には注意が必要です。

CSS
div {
background:gray url(sample.png) no-repeat right top / cover;
}

このように値の前に「/」を入れないと正しく認識されません。

まとめ

background-sizeを使用することで、背景画像のサイズを自在に調整できます。

もっともシンプルなのはピクセルで、サイズを厳密に指定できるので、ワンポイントの装飾を表示させたいときなどに重宝するでしょう。

background-positionと併用すれば、好きな場所に好きなサイズで画像を表示できます。

装飾目的で内容的には重要ではない画像であれば、こうした表示法がおすすめです。

backgroundプロパティはさまざまな設定が可能である分、細かい調整が必要になります。

bockgoround-sizeプロパティの調整も確実に理解しておきましょう。

どうしてもHTMLやCSSの学習が進まず、これからのプログラミングのキャリアに不安がある方はDMM WEB CAMPの無料カウンセリングにお越しください。

どんなことでもご相談お待ちしております。

---

プログラミングやパソコンを使って働きたい！

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！