web-dev-qa-db-ja.com

メディアクエリと背景画像

私はdivを持っています

<div id="page">

</div>

次のCSSで：

   #page {
    background: url('images/white-zigzag.png') repeat-x;
    }

    @media (max-width: 600px) {
  #page {      
  background: url('images/white-zigzag-mobile.png') repeat-x;
  }
}

ブラウザのサイズを変更すると、「モバイル」の背景（良い）が表示されますが、戻ってブラウザを大きくすると、以前の「大きな」背景が常に再表示されるとは限りません。

これは断続的な問題ですが、頻繁に発生しているため、対処する必要があると思います。

この「背景画像が表示されない」問題を回避する方法、または背景画像のサイズを変更してメディアクエリが背景画像を「縮小」して新しいサイズに合わせる方法はありますか？私が知る限り、背景画像のサイズを変更する（広範囲にわたる）方法はありません...

cssmedia-queries
16
redconservatory

this test によると：

onlyイメージのデスクトップバージョンをデスクトップにダウンロードする場合.

およびonlyモバイルデバイスにダウンロードされるモバイルイメージ-

デスクトップ画像の最小ブラウザー幅を指定するには、min-width宣言を使用する必要があります...

およびモバイル画像のmax-width。

したがって、コードは次のようになります。

@media (min-width: 601px) {
  #page {
    background: url('images/white-zigzag.png') repeat-x;
  }
}

@media (max-width: 600px) {
  #page {      
     background: url('images/white-zigzag-mobile.png') repeat-x;
  }
}
24
Danield

あなたが提供したコードは少しバグがあり、おそらくあなたが現在始めているのに良い場所でしょう

#page {
background: url('images/white-zigzag.png') repeat-x;
}

@media (max-width: 600px) {
background: url('images/white-zigzag-mobile.png') repeat-x;
}

メディアクエリの部分が不完全です。クエリの外で使用したCSSセレクターを提供する必要があります。

#page {
background: url('images/white-zigzag.png') repeat-x;
}

@media (max-width: 600px) {
  #page {      
  background: url('images/white-zigzag-mobile.png') repeat-x;
  }
}

まずはそれで問題が解決するかどうかをお知らせください。

1
ckaufman

使ってください

@media screen and (min-width: 320px) and (max-width:580px) {
  #page {
    background: url('images/white-zigzag.png') repeat-x
  }
}
0
Tushar Dhingra