ホームへ

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

2022年02月03日

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について詳しくはこちら↓

CSS background【背景の指定方法】
CSSにおいて背景を指定するには「background」プロパティを使います。backgroundでは主に5つのプロパティがあり、それらを説明します。
この記事を読む

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

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】
htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。
この記事を読む

↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。

【原因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の優先順位のミスなどケアレスミスの可能性があります。

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

CSSが効かない原因と回避方法【よくあるケアレスミス】
CSS効かない、htmlが崩れたときは以下に当てはまらないかチェックしてみてください。
この記事を読む

【まとめ】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選でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】
htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。
この記事を読む
CSSやhtmlをマンガで学ぶ