Мои фиксированные фоны arent отображаются правильно на мобильных устройствах

Question

По-прежнему возникают проблемы. Я был отмечен за то, что не был достаточно конкретным в своем последнем посте, поэтому позвольте мне попытаться быть более конкретным. Я не могу найти способ заставить мой проект перевести на мой iPhone 6. Я использовал различные медиа-запросы, а отзывчивый дизайн работает в Firefox и Chrome «проверяет элемент». Когда я открываю его на своем iPhone 6, он выглядит так.

Моя цель состоит в том, чтобы он приглядеться к этому:

Вот сайт: http://mattvwhittle.com/WeddingWebsite/index.html

Вот что я написал в мета-теги HTML:
meta charset = "utf-8"
meta name = 'viewport' content = "width = device-width,
начальная шкала = 1, максимальная шкала = 1, минимальная шкала = 1, пользовательская масштабируемость = нет "
meta http-equiv =" X-UA-Compatible "content =" IE = edge, chrome = 1 « мета имя =» «содержание =„HandheldFriendly правда“

Вот запрос СМИ я писал по поводу этого вопроса:

@media only screen and (max-width: 480px) { 
.fixed-bg { 
    position: relative; 
    background-size: auto contain; 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
} 
} 

Я новичок на запросы СМИ, но я попробовал:

background-size: auto 100%; 
background-size: 100% auto; 
background-size: 100%; 
background-size: conain; 

Ни один из них не является achievin g желаемый эффект. Любая помощь будет полностью оценена. Спасибо вам.

Answer 1

background-attachment: fixed; не работает на iOS Это не лучшие практики. Я как-то сделал работу с моим сайтом, но если кто-то наткнется на это в начале сборки сайта, НЕ ДЕЛАЙТЕ ЭТО !!!

Answer 2

Попробуйте это - вам не нужно background-size:100% или даже обязательно нужен медиа-запрос для обработки фонового изображения. Свойство CSS3 background-size:cover обрабатывает это довольно хорошо самостоятельно. Хорошо работает на всех мобильных устройствах;

body { 
    background-color: #000; 
    background-image: url(yourimage.jpg); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-attachment: fixed;  
    webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}