【CSS】background-image(背景画像)のサイズを可変、固定する方法

「背景画像の大きさを枠に合わせたい！」

「背景画像の大きさを一定に固定したい」

background-image(背景画像)のサイズを可変、固定する方法を解説します。

【サイズ変更】background-size

background-sizeはbackground-imageで指定した画像のサイズを指定するCSSです。

値については後述します。

下記例では枠の右下をマウスでドラッグする（押しながら動かす）ことで枠のサイズを変えることができます。そのときbackground-imageのサイズがどのように変わるか確認してください。

<style>
.example{
    background-image: url(https://csshtml.work/wp-content/uploads/cat.jpg);
    /*コレ*/background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #dae5f0;
}
</style>
<textarea class="example"></textarea>

backgroundはさまざまなCSSがありますが、下記のように一行で指定することができます。コードがすっきりするのでおすすめです。

background: #dae5f0 url(https://csshtml.work/wp-content/uploads/cat.jpg) no-repeat center center / cover;

backgroundについて詳しくはこちら↓

【サイズ可変】

cover

「background-size:cover」は背景画像を枠に合わせて隙間ができないように調整されます。枠からはみ出る部分は見切れます。

background-sizeにおいて最も指定することの多い値です。

<style>
.example{
    background: #dae5f0 url(https://csshtml.work/wp-content/uploads/cat.jpg) no-repeat center center;
    /*コレ*/background-size: cover;
}
</style>
<textarea class="example"></textarea>

contain

「background-size:contain」は背景画像が枠からはみ出ないように調整されます。

画像を切りたくないときに使います。

<style>
.example2{
    background: #dae5f0 url(https://csshtml.work/wp-content/uploads/cat.jpg) no-repeat center center / cover;
    /*コレ*/background-size: contain;
}
</style>
<textarea class="example2"></textarea>

100% auto

「background-size: 100% auto」は横幅を枠に合わせて、高さは画像の比率に合わせるように調整されます。

<style>
.example3{
    background: #dae5f0 url(https://csshtml.work/wp-content/uploads/cat.jpg) no-repeat center center / cover;
    /*コレ*/background-size: 100% auto;
}
</style>
<textarea class="example3"></textarea>

auto 100%

「background-size: auto 100%」は高さを枠に合わせて、横幅は画像の比率に合わせるように調整されます。

<style>
.example4{
    background: #dae5f0 url(https://csshtml.work/wp-content/uploads/cat.jpg) no-repeat center center / cover;
    /*コレ*/background-size: auto 100%;
}
</style>
<textarea class="example4"></textarea>

【サイズ固定】

○○px auto

サイズを固定するには数値をpx指定します。

「background-size:○○px auto」と指定すると横幅に合わせて高さが、逆にすると高さに合わせて横幅が自動で決まります。

<style>
.example5{
    background: #dae5f0 url(https://csshtml.work/wp-content/uploads/cat.jpg) no-repeat center center / cover;
    /*コレ*/background-size: 300px auto;
}
</style>
<textarea class="example5"></textarea>

【まとめ】background-imageのサイズを変更する方法

サイズ変更するにはbackground-size

• cover
  →枠に合わせて隙間ができないように調整
• contain
  →画像が枠からはみ出ないように調整
• 100% auto
  →横幅を枠に合わせる
• auto 100%
  →高さを枠に合わせる
• ○○px auto
  →固定

以上、background-image(背景画像)のサイズを可変、固定する方法でした。