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

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

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

Это периодическая проблема, но это происходит достаточно часто, и я думаю, что я должен ее рассмотреть.

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

Ответы

Ответ 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;
  }
}

Ответ 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;
  }
}

Начните с этого и сообщите мне, если это исправить.

Ответ 3

пожалуйста, используйте

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