Медиа-запросы и фоновые изображения

Question

У меня есть 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;
  }
}

Я замечаю, что когда я изменяю размер своего браузера, я вижу "мобильный" фон (хорошо), но если я возвращаюсь и делаю свой браузер большим, мой предыдущий "большой" фон не всегда появляется снова.

Это периодически возникающая проблема, но она возникает достаточно часто, и я думаю, что мне следует ее решить.

Есть ли способ обойти эту проблему "фонового изображения не появляется" или способ изменить размер фоновых изображений, чтобы медиазапрос "сжимал" фоновое изображение до нового размера? Насколько я знаю, нет (широко распространенного) способа изменить размер фонового изображения ...

Answer 1

Согласно этот тест :

Если вы хотите только настольную версию образа для загрузки на рабочий стол ...

и только мобильное изображение для загрузки на мобильное устройство -

Вам необходимо использовать объявление min-width, чтобы указать минимальную ширину браузера для изображения рабочего стола ...

и a 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;
  }
}

Answer 2

Код, который вы предоставили, немного глючит, и, вероятно, это хорошее место для начала, у вас есть

#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;
  }
}

Начните с этого и дайте мне знать, если это все исправит.

Answer 3

используйте

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