1

Подскажите, пожалуйста, что нужно сделать чтобы фоновое изображение сайта (backgound) в браузере Safari было фиксированным. На компе в браузерах нормально работает background-attachment, а на Safari — нет.

#container-body {
  padding: 0;
  background: url(images/bg-body.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-attachment: !important;
}
5
  • А чё так? Согласно документации должно работать caniuse.com/#search=background-attachment Попробуй !important использовать 18 янв 2017 в 11:08
  • @blackstar1991 не получается что то или в коде что то не так? 18 янв 2017 в 11:23
  • Погоди, а мы с тобою про одно и тоже Safari говорим? Просто если ты про мобильную версию для IOS, то оно там с каким то ограничениями, или вообще не действует. Вообщем в документации что-то такое написано 18 янв 2017 в 11:31
  • Я про мобильную Safari)) 18 янв 2017 в 11:38
  • @Дмитрий А причём тут JavaScript и jQuery к вопросу? И укажите, пожалуйста, в самом вопросе, что речь идёт про мобильную Safari под iOS. 18 янв 2017 в 12:11

1 ответ 1

2

Мобильный Safari не поддерживает это свойство из-за проблем с производительностью. Без JS для мобильных Safari делал решение на основе position: fixed;. То есть, вместо:

body {
    background: url("../images/bg.jpg") no-repeat 50% / cover fixed;
}

Делаем:

body:before {
    background: url("../images/bg.jpg") no-repeat 50% / cover;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: -1;
}

Подробности в можно найти в этой статье: https://habrahabr.ru/post/282079/

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.