Добавление фиксированного фона в шаблон Squarespace York с помощью пользовательского CSS - проблема с мобильными устройствами - PullRequest
Новая
       37

Добавление фиксированного фона в шаблон Squarespace York с помощью пользовательского CSS - проблема с мобильными устройствами

0 голосов
/ 24 мая 2018

Я пытаюсь добавить фиксированное фоновое изображение на свой сайт Squarespace, используя шаблон York .Сайт можно посмотреть здесь ( www.newinkmedia.co ).

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

Снимки экрана и пользовательский CSS ниже:

Снимок экрана рабочего стола

Снимок экрана мобильного устройства # 1

Снимок экрана мобильного устройства № 2 

.overflow-wrapper {
    -webkit-transition: background-color 100ms linear;
    -moz-transition: background-color 100ms linear;
    -ms-transition: background-color 100ms linear;
    -o-transition: background-color 100ms linear;
    transition: background-color 100ms linear;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #ffffff;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
    background-image: url("https://static1.squarespace.com/static/5ac6c7bd5417fc86faa1ce9d/t/5acd6b972b6a28a577ff7603/1523411863575/newink_concept_v2ai-09.jpg");
}

Дайте мне знать, что вы думаете.Очень признателен за помощь.

1 Ответ

0 голосов
/ 26 мая 2018

Мой друг-разработчик указал мне на следующее решение .Вставил мой пересмотренный CSS ниже, чтобы содержать & center.Кажется, работает нормально на мобильных Chrome и Safari через iPhone 7. 

.overflow-wrapper {
    -webkit-transition: background-color 100ms linear;
    -moz-transition: background-color 100ms linear;
    -ms-transition: background-color 100ms linear;
    -o-transition: background-color 100ms linear;
    transition: background-color 100ms linear;
    overflow-x: hidden;
    overflow-y: auto;
}

body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: url(https://static1.squarespace.com/static/5ac6c7bd5417fc86faa1ce9d/t/5acd6b972b6a28a577ff7603/1523411863575/newink_concept_v2ai-09.jpg) no-repeat center;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}
...