Фоновое изображение не правильно на мобильном

Question

Мое фоновое изображение на мобильном телефоне становится очень размытым .

Но на DevTools верен .

Это так странно, как исправитьэто?

.contact
  padding: 80px 30px
  color: #fff
  background: #151515 url('../src/assets/images/about.jpg') no-repeat fixed left bottom
  min-height: 100%
  background-size: cover
  position: relative

Answer 1

Фоновое изображение некорректно на мобильном телефоне. Вы css background-size мобильного:

background-size: contain;

Answer 2

Без кода для тестирования, я думаю, что проблема связана с атрибутом fixed: https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

Если вы удалите его, он должен показать изображение, соответствующее области просмотра и обрезать часть, которая не можетдисплей.Так как изображение намного больше, чем окно просмотра, при использовании фиксированного оно покажет вам ту часть изображения, которая соответствует текущему окну просмотра.

Так что попробуйте:

background: #151515 url('../src/assets/images/about.jpg') no-repeat left bottom;