ホームへ

【CSS】background-sizeが効かない原因と解決方法5選

background-sizeは背景画像の大きさを指定できるCSSです。

「background-sizeを指定したのに画像の大きさが変わらないよ!?」

「backgroundまでは効いていたのにbackground-sizeを指定したら画像が表示されなくなった!?」

background-sizeが効かない原因と解決方法を5つ紹介します。

【復習】一行backgroundの書き方

「background-sizeが効かない原因」と深い関係があるため、まずは一行backgroundの書き方を確認しましょう。

「background」は「backgroundに関するCSS」を一行で指定するCSSです。

具体的には下記のCSSを一行にできます。

  • background-color:色(初期値:transparent)
  • background-image:画像(初期値:none)
  • background-repeat:繰り返し(初期値:repeat)
  • background-position:左からの位置 上からの位置(初期値:0 0)
  • background-size:横のサイズ 縦のサイズ(初期値:auto auto)

一行にした場合

background:色 url(画像URL) 繰り返し 左からの位置 上からの位置 / 横のサイズ 縦のサイズ

具体例

background:transparent url(https://csshtml.work/wp-content/uploads/cat.jpg) no-repeat center 0 / auto 100%;

結果

一行backgroundで指定を省略した場合、基本的に初期値になります。

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

上記を踏まえて「background-sizeが効かない原因」を見ていきましょう。

【原因1】backgroundで上書きしているから

「background-size」を指定した後に「background-sizeを指定しないbackground」を指定するとbackground-sizeが初期値で上書きされます。

NG(background-sizeをに記述)

<style>
.example{
    background-size: cover;
    background: url(cat.jpg);
    height: 200px;
    width: 300px;
}
</style>
<div class="example"></div>

OK(background-sizeをに記述)

<style>
.example2{
    background: url(cat.jpg);
    background-size: cover;
    height: 200px;
    width: 300px;
}
</style>
<div class="example2"></div>

「background」と「backgroundに関するCSS」を同時に指定するとき、「backgroundに関するCSS」は「background」の後に記述しましょう。

【原因2】background-positionを指定していないから

一行backgroundでbackground-sizeを指定しておりbackground-positionを指定しない場合、backgroundごと効かなくなります。

NG(position指定なし

background: url(cat.jpg) / cover

OK(position指定あり

background: url(cat.jpg) 0 / cover

先述したようにbackgroundで指定しないCSSは基本的に初期値になるのですが、例外的にbackground-sizeを指定したときbackground-positionを指定しないとbackgroundそのものが壊れて効かなくなります。

一行backgroundでbackground-sizeを指定するときは必ずbackground-positionも指定しましょう。

【原因3】background-positionとbackground-sizeが離れているから

一行backgroundは順番を入れ替えることができますが、「background-position / background-size」を離したり入れ替えると効かなくなります。

NG

background: url(cat.jpg) 0 no-repeat / cover

OK

background: url(cat.jpg) no-repeat 0 / cover

「background-position / background-size」で一塊だと考えましょう。

【原因4】スラッシュを忘れているから

一行backgroundで指定する場合background-sizeの前に「/」スラッシュが必要です。

NG

background: url(cat.jpg) 0 cover

OK

background: url(cat.jpg) 0 / cover

なお、「/」の前後の空白スペースは任意です。

【原因5】空白がないから

background-sizeでは横の大きさと縦の大きさを指定しますが、その間には半角スペースが必要です。全角スペースはダメです。

NG

background-size: auto100%;

OK

background-size: auto 100%;

その他の原因 記述ミスなど

スペルミスや記号のミス、CSSの優先順位のミスなどケアレスミスの可能性があります。

下記記事を参考に見直してみてください。

【まとめ】background-sizeが効かない原因と解決方法

【原因1】backgroundで上書きしているから

「backgroundに関するCSS」は「background」の後に記述する。

【原因2】background-positionを指定していないから

一行backgroundでbackground-sizeを指定するときbackground-positionを指定する。

【原因3】background-positionとbackground-sizeが離れているから

「background-position / background-size」で一塊だと考える。

【原因4】スラッシュを忘れているから

一行backgroundで指定する場合background-sizeの前に「/」スラッシュが必要。

【原因5】空白がないから

background-sizeの「横の大きさ」と「縦の大きさ」の間には半角スペースが必要。

以上、background-sizeが効かない原因と解決方法5選でした。

マンガで読める関連記事