Использование фонового вложения: исправлено в safari на ipad

Я ищу, чтобы воссоздать эффект, похожий на приложение популярной науки. В основном есть одно большое фоновое изображение, а затем поверх него есть HTML / CSS-слой. Когда пользователь прокручивает содержимое, тогда фоновая позиция изображения должна оставаться на месте, а не прокручиваться.

Очевидно, что в «обычном» браузере я бы использовал background-attachment: fixed, но, похоже, это не работает на ipad. Я знаю, что позиция: исправлено не работает, как вы могли бы ожидать по спецификации safari, но есть ли способ достичь этого?

Вы можете использовать этот код, чтобы фиксированный фоновый слой взломал эту проблему.

#background_wrap { z-index: -1; position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-size: 100%; background-image: url('xx.jpg'); background-attachment: fixed; }

И положите

Мобильное safari масштабирует весь ваш сайт до размера видового экрана, включая фоновое изображение. Чтобы добиться правильного эффекта, используйте свойство CSS -webkit-background-size для объявления вашего фонового размера:

 -webkit-background-size: 2650px 1440px;

(подсказка шляпы комментатору Mac )

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

 #background_wrap { z-index: -1; position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-size: cover; background-image: url('../images/compressed/background-mobile.png'); background-repeat: no-repeat; background-attachment: scroll; }

Просто изменили размер фона и фонового вложения, чтобы сделать изображение статическим.

Я считаю, что вы можете поместить фоновое изображение в div и установить z-index для отображения другого содержимого. Впоследствии вы можете использовать javascript для фиксации положения div, который содержит фоновое изображение.

Я не тот профессионал, но я решил эту проблему usin ‘jquery. Это довольно просто) Вот код:

  jQuery(window).scroll(function(){ var fromtop = jQuery(window).scrollTop(); jQuery(" your element ").css({"background-position-y": fromtop+"px"}); });

следующее решение в Css:

 body { background-image: url( ../images/fundobola.jpg ); background-position: top center;background-repeat:no-repeat; background-size: 1900px 1104px; overflow: -moz-scrollbars-vertical; overflow-y: scroll; }

— не использовать —- (причина: отключить прокрутку)