Фоновое изображение не работает на iPad

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

Хорошо, я признаю это - я ленился и не проверял ни один сайт с фиксированным фоновым изображением на моем iPad; в конце концов, именно Internet Explorer вызывает у нас дизайнеров все проблемы, верно? Не обязательно так в эти дни. Но есть исправление для кода CSS для вашего фиксированного фонового изображения, которое не работает.

Проблема
На вашем рабочем столе все выглядит отлично, и, возможно, теперь вы убедитесь, что на вашем сайте есть версия для смартфона, поэтому нет причин думать, что все не так хорошо в вашей CSS. Но iPad и подобные планшеты, как правило, рассматриваются как «настольные компьютеры» или «ноутбуки», когда речь идет о поисковых системах, и поэтому настольная версия веб-сайта - это та, которая лучше всего отображается на iPad - и вот где проблема является.

Вот верный код, который вы добавили в свой CSS:

1 2 3 4 5 6 7 8 background-image: url (images / back2.jpg); повторение фона: без повтора; background-attachment: исправлено; background-position: top; размер фона: 100% авто; -moz-background-size: 100% авто; -o-background-size: 100% авто; -webkit-background-size: 100% авто;

Вы можете подумать, что -webkit- и -moz- рожки для обуви должны охватывать все, что относится к юрскому веку CSS, но здесь вы можете получить сюрприз. Скорее всего, ваше фоновое изображение полной ширины и полной высоты просто находится в верхней части экрана планшета iPad, а остальная часть страницы по умолчанию становится белой, что делает текст неприемлемым. iOS не слушает то, что вы говорите.

Я полагаю, что причина в «усилиях», необходимых для загрузки таких больших изображений на мобильные устройства. Это все о мобильной оптимизации и быстрой загрузке в наши дни - но это другая история, мы просто хотим исправить наше фоновое изображение.

Решение
Похоже, что код, который вы использовали целую вечность, хотя и технически исправный, просто не работает на вашем iPad или iPad Mini, но решение простое - хотя на момент написания этого документа оно не было доступно на многих форумах.

Просто замените приведенный выше CSS-код на этот (как часть кода « body {} »), и у вас есть исправление проблем iPad IOS, корректно отображающих фоновое изображение:

1 2 3 4 5 6 7 8 9 10 11 12 background-image: url (images / bg1.jpg); повторение фона: без повтора; background-attachment: исправлено; background-position: top; размер фона: обложка; -webkit-background-size: обложка; -moz-background-size: обложка; -o-background-size: обложка; высота: 100%; ширина: 100%; background-position: центр центра; background-repeat: no-repeat;}

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