У меня проблема с правильным расположением фонового изображения. Он работает на рабочем столе, и даже когда я изменяю размер окна для имитации телефона, он отображается правильно, но когда я фактически посещаю веб-сайт на своем телефоне (проверено на Android / Chrome и iOS / Safari), кажется, что он игнорирует фоновое положение свойство.

CSS в вопросе:

.blur {
        background: 
    /* top, transparent blue, faked with gradient */ 
    linear-gradient(
      rgba(43, 43, 43, 0.1), 
        rgba(43, 43, 43, 0.1)
    ),
    /* bottom, image */
    /* BACKGROUND IMAGE */
    url('https://suzannecowan.ca/wp-content/uploads/2016/04/2015-10-20-macleans-2-1.jpg');
  background-attachment: fixed;
  background-position: -350px -150px;
  background-position-x: -350px;
  background-position-y: -150px;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #2b2b2b;
  overflow: auto;
}

@media (min-width: 40em) {

.blur {
      background: 
    /* top, transparent blue, faked with gradient */ 
    linear-gradient(
      rgba(43, 43, 43, 0.1), 
      rgba(43, 43, 43, 0.1)
    ),
    /* bottom, image */
    /* BACKGROUND IMAGE */
    url('https://suzannecowan.ca/wp-content/uploads/2016/04/2015-10-20-macleans-2-1.jpg');
  background-attachment: fixed;
  background-position: -350px 0; 
  background-size: cover;
  background-repeat: none;
  }

@media (min-width: 50em) {

  .blur {
  background: 
      /* top, transparent blue, faked with gradient */ 
      linear-gradient(to right,
        rgba(43, 43, 43, 0.1), 
        rgba(43, 43, 43, 0.1)
      ),
      /* bottom, image */
      /* BACKGROUND IMAGE */
      url('https://suzannecowan.ca/wp-content/uploads/2016/04/2015-10-20-macleans-2-1.jpg');
    background-attachment: fixed;
    background-position: -250px 0; 
    background-size: cover;
    background-repeat: none;
    }

Я искал решения и нашел два предложения, которые помогли людям в прошлом: добавление background-position-x и background-position-y, которые не помогли, и перемещение фонового изображения из body в другой контейнер (.blur в данном случае), который тоже не помог.

Сайт: https://suzannecowan.ca/.

Заранее благодарим за любой совет, который вы можете дать.

0
Cole Davidson 8 Апр 2016 в 06:41

2 ответа

Лучший ответ

Установка вашего изображения bg на cover означает, что оно будет растягиваться до высоты экрана, а это значит, что на небольшом устройстве вы получите очень узкое изображение. Лично я бы либо изменил размер изображения, сделав его выше и тоньше, чтобы оно лучше подходило к экрану мобильного телефона, либо вместо этого установил бы размер фона на 100% auto, что выглядит неплохо, imho.

2
ralph.m 8 Апр 2016 в 04:29

В Android / Chrome фон позиционируется. Если вы измените значение, изображение переместится. Вы также можете подтвердить это через веб-отладчик Chrome (мобильный).

Разница между мобильным и настольным устройствами связана с разницей в том, как они обрабатывают единицы длины.

0
Marc J 8 Апр 2016 в 04:16