Мобильные фоновые изображения Zoomed In

Question

Я нашел несколько запросов по этой линии, и у них либо не было решений, либо их решения не сработали для меня. У меня настроены медиа-запросы, наименьшая - максимальная ширина (700 пикселей), и когда я просматриваю сайт на своем рабочем столе с моим браузером, установленным на ширину iPhone, он отлично просматривается. Однако, когда вы просматриваете мой iPhone, он показывает только очень небольшую часть фотографии. (Как в Safari, так и в Chrome.) Я не уверен в устройствах Android, так как у меня нет возможности тестировать.

Edit: Многостраничный сайт на http://www.dragonflyav.com

Вот CSS:

@media (max-width: 700px) { 
 
    .intro { 
 
     background-image: url("images/backgrounds/fleet-top-770.jpg"); 
 
     background-size: cover; 
 
     -webkit-background-size: cover; 
 
     -moz-background-size: cover; 
 
     -o-background-size: cover; 
 
     background-position: center top; 
 
     background-repeat: no-repeat; 
 
     background-attachment: fixed; 
 
     height: 75vh; 
 
    }

Я уверен, что я что-то просто не хватает, я попытался несколько вариаций выше, включая отключение каждого отдельного имущества по отдельности, без везения. Мой HTML мета-тег выглядит следующим образом:

 <meta name="viewport" content="width=device-width" content="initial-scale-1">

Answer 1

Вы overrulling неправильный стиль. На настольной стилизации вы используете:

background: url(images/backgrounds/fleet-top-2400.jpg) no-repeat center center fixed; 

и ответные вы используете:

background-image: url("images/backgrounds/fleet-top-770.jpg"); 

Таким образом, вы будете видеть на рабочем стол изображения на верхней части отзывчивых изображений. Использование только одного свойства фона решит его для вас. Так что я бы лично придерживаться:

background-image: url(images/backgrounds/fleet-top-2400.jpg) no-repeat center center fixed;