Размер фиксированных фоновых изображений не будет изменяться для соответствия мобильному окну просмотра - PullRequest
Новая
       57

Размер фиксированных фоновых изображений не будет изменяться для соответствия мобильному окну просмотра

0 голосов
/ 10 июля 2020

Фоновое изображение для домашней страницы не будет уменьшено до второго фонового изображения домашней страницы, которое я подготовил для мобильного порта просмотра.

В Google / Firefox dev веб-сайт отлично отображается в мобильной версии -port, но когда я просматриваю веб-сайт на реальном мобильном телефоне, фоновое изображение домашней страницы выглядит очень увеличенным и не отображает альтернативное изображение.

Я попытался настроить свой CSS и заново настроить HTML но безрезультатно, проблема сохраняется.

Я оставлю фрагменты HTML и CSS ссылки на веб-сайт для получения совета. 

#section-section1 {
  background-image: url("../images/section-1-background.png");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100%;
  width: 100%;
}

#section-section1 {
  background-image: url("../images/section-1-background-mobile2.png");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  height: 100%;
  width: auto;
}
    <section data-role="section" id="section-section1">
      <div class="section-1-text">
        <h1>
          <span style="font-weight: 400;">STYLE 101:</span><br />A HISTORY<br />OF
          TARTAN FASHION
        </h1>
        <button id="slide" type="button">
          <a href="#section-section2"><p>START</p></a>
        </button>
        <p class="section-1-p">Scroll down or drag sideways</p>
      </div>
    </section>

Ссылка на сайт: http://www.07715414453.uk/

1 Ответ

0 голосов
/ 12 июля 2020

Когда я удаляю следующее правило CSS из всех фоновых изображений:

"background-attachment: fixed;"

Изображения затем уменьшаются при просмотре на iPhone.

...