メディア照会は、背景イメージを上書きします

Question

画面サイズが変更されたときに変更したい背景イメージがあります。どうやら私がメディアクエリを使用するたびに、私はそれに入力した色に自分の背景イメージを上書きします。その仕事、あるいはその両方がイメージしなければなりませんか？ありがとうございました。

#home { 
padding-top: 35px; 
background-image: url("../images/homebg.jpg"); 
background-size: cover; 
height: 100vh; 
width: 100%; 
} 

@media (min-width: 480px) { 
#home { 
    background: #fcb595; 
} 
} 

Answer 1

それはあなたの前に作られたスタイルを「上書き」、それはあなたが短い手backgroundスタイルを使用しているという事実だとメディアクエリではありません。

ほとんどの場合、これは以前に設定したbackground-*スタイルを上書きします。これにはbackground-imageスタイルが含まれます。

代わりに、方法について：

@media (min-width: 480px) { 
    #home { 
     background-color: #fcb595; 
    } 
} 

注：あなたは、背景画像の一部透明な部分を持っていない限り、背景画像がとにかく背景色をカバーすることから、このスタイルは、冗長です。

Answer 2

あなたの質問によると、答えはうまくいくでしょうし、両方がイメージでなければならないということは必須ではありません。

コードは完全に動作しています。しかし、私はあなたがmax-widthとmin-widthについて混乱していると思います。あなたのコードはうまく動作しています。 Working Fiddle

HTML：

<div id= "home"> 

</div> 

のCss：

#home { 
padding-top: 35px; 
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTupAbxBl02rU1nM9ZA0OLBlsDKmoAoOlhCfUdP0XDeFLj8q1Ec"); 
background-size: cover; 
height: 100vh; 
width: 100%; 
} 

@media (min-width: 480px) { 
#home { 
    background: #fcb595; 
} 
}