2014-07-17 4 views
0

Я использую медиа-запросы для мобилизации веб-сайта. Кажется, все идет хорошо, за исключением того, что фоновое изображение не будет изменяться, поскольку изображение переднего плана в верхней части страницы. Мои медиа-запросы вступают в силу с 650px и находятся в файле junkyardzombie.css внизу файла. Может кто-то, пожалуйста, помогите мне в этом вопросе. Испытательный участок находится в http://shoponlinedemo.com/junkyard-zombiez/Фоновое изображение не будет изменять размер

+2

Попробуйте добавить 'background-size: contains;' Скорее всего, это исказит ваше изображение, поэтому вам захочется создать различные фоновые изображения для разных размеров экрана. – APAD1

+0

Спасибо. Это отлично работает в хроме, но не в FF или IE. Использование background-size: обложка также не работает. Какие-либо предложения? –

+0

Я думал, что я должен использовать ширину: auto на соответствующем div и заставить его работать. Я также думал, что атрибут min-height предотвращает масштабирование изображения со страницы, когда окно браузера меньше 650 пикселей. –

ответ

0

По умолчанию фоновое изображение представляет собой статический размер (размер собственного изображения). Вы можете контролировать размер фонового изображения, используя свойство background-size (подробнее об этом here).

В этом случае вы можете использовать background-size:contain;, который будет сжимать размеры изображения до ширины содержащего элемента (или ширины окна браузера, если нет элемента, содержащего).

Смежные вопросы