Как заставить background-size: cover; работать на мобильных устройствах?

Question

[Пётр Волханов]

Как заставить background-size: cover; работать на мобильных устройствах?

.firstsection{
	background-image: url(../wp-content/uploads/2019/05/Header_Background.jpg);
	background-image: -webkit-image-set(url(../wp-content/uploads/2019/09/Header_Background.webp)1x );
	background-size: cover; /* Resize the background image to cover the entire container */
	background-attachment: fixed;
	height: 100%;
	overflow: hidden;
}

Comments

[Александр]

код в студию

[Пётр Волханов]

Александр, добавил

[Rustam Bainazarov]

Пётр Волханов, background-attachment: fixed уберите, тогда заработает нормально.

[Rustam Bainazarov]

OML_KVLT, раньше баг был в Android Chrome и iOS Safari (background-size: cover работал как background-size: 100%, если был background-attachment: fixed) сейчас проверил, вроде бы нет уже:



Но на телефонах до сих пор не работает background-attachment: fixed. Ну хоть cover больше без бага по совместном с ним использовании.

[Rustam Bainazarov]

Пётр Волханов, так что у вас не работает точно: size или attachment?

Answer 1

[Александр]

Это свойство работает в некоторых мобильных браузерах, но оно относится к css 3.0, которое может не поддерживаться на старых устройствах/браузерах.
Подробнее о поддержке: трунь
А точнее

Comments

[Пётр Волханов]

Посмотрите на этом сайте с мобильного и компьютера, не прокручивая вниз и вы поймете о чем я говорю.

[Александр]

Cover Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
Высота изображения и так равна высоте блока

Answer 2

[profesor08]

.firstsection {
  background-size: cover;
  background-attachment: fixed;
}

Не совместимы.

Ищи другое решение, например позиционируй на js.