Фоновый рисунок не отображается на iphone/tablet

У меня есть фоновое изображение, которое не отображается на iphone/tablet! Самое забавное, что если вы используете ноутбук, но установите размер окна по сравнению с размером экрана iphone/tablet, он все равно отображается (попробуйте изменить размер сайта).Фоновый рисунок не отображается на iphone/tablet

#intro { 
background: url('imageurlhere') no-repeat right fixed; 
background-color: #fdfdfd; 
-webkit-background-size: 50% 125%; 
-moz-background-size: auto 125%; 
-o-background-size: auto 125%; 
background-size: auto 125%; 
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imageurlhere', sizingMethod='scale'); 
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imageurlhere', sizingMethod='scale')"; 
padding-top: 10%; 
}

Если я сниму параметр «фиксированный», он покажет, но параллакс исчезнет.

Есть ли способ исправить это? Благодаря!

источник

2013-08-18 user2494251

Какой размер фонового изображения? У Apple есть правила по размеру изображений, и это привело к тому, что фоновые изображения людей не видны. – Vector

Ширина: 603, Высота: 1371! Хм, так эти правила размера изображения применяются даже при изменении размера фона в CSS? Кроме того, я попробовал его с помощью браузера WebOS и возникла одна и та же проблема:/ Я тестировал с помощью браузера Chrome и Safari на ipad/iphone. – user2494251

Если он работает на настольных компьютерах и т. Д., То вы знаете, что путь к CSS и файлам правильный. Это кажется немного большим, это должно быть iOS, блокирующее его. Путь вокруг него состоял бы в том, чтобы нарезать его на 2, а затем собрать их, чтобы они выглядели как единое целое. – Vector

Проблема была в положении-y: исправлена свойство удобства.

Safari on iOS не распознал fixed, поэтому он игнорировал все правило (см. Прилагаемый скриншот).

enter image description here

Снимите:

background: url(http://i.imgur.com/CVJVeWw.jpg) no-repeat right fixed;

и добавить вместо:

background-repeat: no-repeat; 
background-size: auto 125%; 
background-position-x: right; 
background-position-y: fixed; 
background-image: url(http://i.imgur.com/CVJVeWw.jpg);

Update см background-position-y и background-attachment: fixed

я играл с этим би t больше, чтобы увидеть, могу ли я заставить его работать немного лучше для вас. По какой-то причине, когда оба значения background-attachment: fixed; и background-position-x: right; указаны на iOS 6x, фон пропускается. Однако, сбросив background-attachment: fixed; на initial, изображение отображается, хотя вы теряете параллакс.

Итак: попробуйте это на рабочий стол:

#intro { 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    background-position-x: right; 
    background-position-y: center; 
    background-image: url(http://i.imgur.com/rKJbwgL.jpg); 
    background-color: #fdfdfd; 
    -webkit-background-size: 110% 110%; 
    -moz-background-size: auto 125%; 
    -o-background-size: auto 125%; 
    background-size: auto 110%; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://i.imgur.com/rKJbwgL.jpg', sizingMethod='scale'); 
    -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://i.imgur.com/rKJbwgL.jpg', sizingMethod='scale')"; 
    padding-top: 10%; 
    margin-right: -10%; 
}

Затем в медиа-запрос для телефона/планшета, сбросьте фоновое вложение:

background-attachment: initial;

Позвольте мне знать, если это работает немного лучше вы.

источник

2013-08-18 19:52:35 dc5

Я в хромированном браузере, а background-position-y не распознается – user2494251

iOS все еще работает, правда? Я нахожусь в Chrome на рабочем столе, и ваш сайт выглядит правильно. Однако что-то странное происходит с фоном. Chrome показывает ошибку, но если вы удалите стиль в инспекторе, это испортит ваш макет. – dc5

Фоновый рисунок не отображается на iphone/tablet

ответ

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