CSSを使用してブラウザの幅に基づいて異なるサイズの背景イメージをロードしていますか？

Question

私は、表示ポートの幅に基づいて背景としてさまざまなイメージをロードしたいと思うページがあります。私は画像タグと通常の画像のためのsrcsetタグでそれを行う方法を理解していますが、タグの背景画像を扱うときにそれを行う方法があるのだろうか？ 私が現在使用していますが、たとえばメディアクエリー

を使用することができます

body{ 
background-image:url(/Content/Images/CloudGradient_480.jpg); 
background-repeat:no-repeat; 
background-size:cover; 
background-position:center; 
} 

Answer 1

メディアクエリを使用しますが、上限と下限の両方を指定します。それ以外の場合は、1つだけ表示されていても、すべての画像がロードされます。この方法では、1つの画像のみが読み込まれ、帯域幅とローディング時間が節約されます。

body { 
    background-repeat:no-repeat; 
    background-size:cover; 
    background-position:center; 
} 

@media screen and (min-width: 480px) and (max-width: 800px) { 
    body { 
    background-image:url(/Content/Images/CloudGradient_800.jpg); 
    } 
} 
@media screen and (min-width: 801px) and (max-width: 1200px) { 
    body { 
    background-image:url(/Content/Images/CloudGradient_1200.jpg); 
    } 
} 
@media screen and (min-width: 1200px) { 
    body { 
    background-image:url(/Content/Images/CloudGradient_2000.jpg); 
    } 
} 

Answer 2

されるCSS：

body{ 
    background-image:url(/Content/Images/CloudGradient_1280.jpg); 
    background-repeat:no-repeat; 
    background-size:cover; 
    background-position:center; 
} 

@media max-width: 500px { 
    body { 
     background-image:url(/Content/Images/CloudGradient_480.jpg); 
    } 
} 
@media max-width: 700px { 
    body { 
     background-image:url(/Content/Images/CloudGradient_680.jpg); 
    } 
} 

Answer 3

はCSS media queriesを使用して、それを試してみてください、あなたは別の画面に異なる背景イメージを持っているでしょうかポートサイズ。