Фоновая фотография выглядит нормально в адаптивном браузере, но по-другому на смартфоне ⇐ CSS

[Anonymous]

Можете ли вы проверить этот мой веб-сайт?
Веб-сайт
Если вы переключитесь на адаптивный режим в браузере, фоновое изображение будет таким же, как у меня хочу быть.
Но на телефоне фоновое изображение неправильное. Он каким-то образом увеличен (сам себя не вижу).
Это главный баннер, и я привязываю его к CSS вот так

Код: Выделить всё

.hero-bg {
background: url('../img/hero-banner.jpg') 50% fixed no-repeat;
height: 100vh;
background-size: cover;
}

Я также пробовал разные настройки, например, object-fit: contains, и пробовал другое масштабирование, например 80 %, и разную высоту, а также размер фона: contains. Ничего не получается.
Я также пытался загрузить фотографию меньшего размера для медиа-запроса.. проблема все та же.
Вот мои настройки для медиа-запроса.

Код: Выделить всё

@media only screen and (max-width: 980px) {
.hero-bg {
background: url('../img/Klein.jpg') 20% fixed no-repeat;
height: 100vh;
background-size: cover;
}

}

Вот HTML-фрагмент главного баннера

Код: Выделить всё

Son Hai Vu
M.Sc. Computer Science
Stuttgart, Germany
[url=#ueber-uns]

Go to Projects

[/url]

У меня нет другой идеи. Пожалуйста, помогите

Подробнее здесь: https://stackoverflow.com/questions/783 ... smartphone