【CSS】background-sizeが効かない原因と解決方法5選マンガでわかるホームページ作成ホームへ【CSS】background-sizeが効かない原因と解決方法5選2022年02月03日background-sizeは背景画像の大きさを指定できるCSSです。「background-sizeが効かない原因」と深い関係があるため、まずは一行backgroundの書き方を確認しましょう。「background」は「backgroundに関するCSS」を一行で指定するCSSです。具体的には下記のCSSを一行にできます。一行backgroundで指定を省略した場合、基本的に初期値になります。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が初期値で上書きされます。class="example2"></div>「background」と「backgroundに関するCSS」を同時に指定するとき、「backgroundに関するCSS」は「background」の後に記述しましょう。【原因2】background-positionを指定していないから一行backgroundでbackground-sizeを指定しておりbackground-positionを指定しない場合、backgroundごと効かなくなります。cover先述したようにbackgroundで指定しないCSSは基本的に初期値になるのですが、例外的にbackground-sizeを指定したときbackground-positionを指定しないとbackgroundそのものが壊れて効かなくなります。一行backgroundでbackground-sizeを指定するときは必ずbackground-positionも指定しましょう。background-size」を離したり入れ替えると効かなくなります。background-size」で一塊だと考えましょう。【原因4】スラッシュを忘れているから一行backgroundで指定する場合background-sizeの前に「/」スラッシュが必要です。coverなお、「/」の前後の空白スペースは任意です。【原因5】空白がないからbackground-sizeでは横の大きさと縦の大きさを指定しますが、その間には半角スペースが必要です。全角スペースはダメです。記述ミスなどスペルミスや記号のミス、CSSの優先順位のミスなどケアレスミスの可能性があります。下記記事を参考に見直してみてください。CSSが効かない原因と回避方法【よくあるケアレスミス】CSS効かない、htmlが崩れたときは以下に当てはまらないかチェックしてみてください。【原因1】backgroundで上書きしているから「backgroundに関するCSS」は「background」の後に記述する。【原因2】background-positionを指定していないから一行backgroundでbackground-sizeを指定するときbackground-positionを指定する。background-size」で一塊だと考える。【原因4】スラッシュを忘れているから一行backgroundで指定する場合background-sizeの前に「/」スラッシュが必要。【原因5】空白がないからbackground-sizeの「横の大きさ」と「縦の大きさ」の間には半角スペースが必要。以上、background-sizeが効かない原因と解決方法5選でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。