レスポンシブサイトを作成していてCSSに下記の記述をしました。
div#mainImgBack {
width:100%;
height:380px;
padding-top:30px;
background-image: url(../images/main-img-back.gif);
background-repeat: repeat-x;
}
@media screen and (max-width: 480px) {
div#mainImgBack {
width:100%;
height:380px;
padding-top:30px;
}
}
メディアクエリでbackground-imageが反映されないように記述しましたが、スマホで確認するとbackground-imageで指定した画像が表示されてしまいます。
原因が分からずに困っています。アドバイスをお願いいたします。
みんなの回答 1 件
あなたはレスポンシブWebだメディアクエリだ以前に、CSSが何かをまず理解するべきです。
CSSは打ち消さない限りはルールの中で「カスケーディング（継承される）」ものです。
引き算の要領でbackgroundを書かないことで指定を打ち消していると思ってるのでしょうが、逆です。書かなければそのまま継承されるので指定したことと同じです。
また逆に、width、height、padding-topを同じものを繰り返し指定していますが、指定しなければ自動で継承されるので、これは全く意味のないことです。つまり、あなたの記述している@media screen and (max-width: 480px) { ... }の部分は無意味な状態です。
関連するトピックス