CSS фоновое изображение не реагирует в браузере на реальном смартфоне

Question

У меня CSS, как показано ниже, при тестировании в браузере P C он был адаптивным, я уже тестировал в режиме адаптивного дизайна, это нормально, но когда я тестировал на своем телефоне, фон не реагировал:

.imgBG {
  background: url(../../../assets/img/bg-img/bg-login-blur.jpg) no-repeat center center fixed;
  font-family: Open Sans;
  padding-top: 40px;
  padding-bottom: 40px;
  position: fixed;
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  padding:20px;
 }

Чего мне не хватает, не могли бы вы посоветовать мне?

Answer 1

добавить эту строку в код : background-attachment: fixed;

Answer 2

Используйте этот код.

 .imgBG { 
    background-image: url(../../../assets/img/bg-img/bg-login-blur.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
}

Answer 3

Добавьте это в заголовок HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">