Как растянуть фон на всю высоту?

Question

[Olzhas Ilyubayev]

Хэй!
Использую шаблон от HTML5UP → html5up.net/uploads/demos/aerial
Убрал прокрутку и белые декали над фоном в CSS. Также сменил фон на картинку соотношением примерно 14:9(4288*2848). В оригинале же картинка достаточно широкая.
Появилась проблема на мобильных устройствах: картинка не заполняет свободное пространство и ужимается по ширине под ширину экрана.

Сообственно, вопрос: как сделать чтобы картинка расширялась и заполняла всю высоту?
Стоит заметить, что background-size: contain или background-size: cover - не работают ):

Код CSS отвечающий за фон:

#bg {
	/* Отключенная анимация
		-moz-animation: bg 60s linear infinite;
		-webkit-animation: bg 60s linear infinite;
		-ms-animation: bg 60s linear infinite;
		animation: bg 60s linear infinite;
		-moz-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		backface-visibility: hidden;
		-moz-transform: translate3d(0,0,0);
		-webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
       */
	/* Set your background with this */

		background: #348cb2 url("images/bg.jpg") bottom left;
		height: 100%;
		left: 0;
		opacity: 1;
		position: fixed; 
		top: 0;
	}

Answer 1

[Сергей Мельников]

background: #348cb2 url("images/bg.jpg") center;
background-size: cover;

Comments

[Евгений Петров]

Можно и в одну строчку ... center / cover

[Александр Зонов]

Я бы дополнил это еще явных указанием backgound-position: 50% 50%; или иное в зависимости от содержания изображения.

Answer 2

[webdev27]

Была похожая проблема, решилась она этим свойством min-height: 100vh

body {
background: url(../bg.jpg) no-repeat;
background-size: cover;
min-height: 100vh;
}

Comments

[Dimoooooooooooonnnn]

СПАСИБО ТЕБЕ БОЛЬШОЕ, У МЕНЯ НЕ ПОЛУЧИЛОСЬ РАСТЯНУТЬ ФОН ПО ВЫСОТЕ, Я ЭТО ДЕЛАЛ 2 ЧАСА ПРИЧЁМ НОЧЬЮ, Я НАКИНУЛСЯ НА ТВОЙ ОТВЕТ, ВВЁЛ ЭТО И ВУАЛЯ! ФОН РАСТЯНУТ НА ВСЮ СТРАНИЦУ ПО ВЫСОТЕ. ДААААА, ЮХУУУУ, Я СДЕЛАЛ ЭТО. СПАСИБО БОЛЬШОЕ ТЕБЕ ДОБРЫЙ ЧЕЛОВЕК, НИКОГДА НЕ ОСТАНАВЛИВАЙСЯ НА ДОСТИГНУТОМ, ИДИ ТОЛЬКО ВПЕРЁД, УСПЕХОВ ТЕБЕ ПО ЖИЗНИ!!!

[Markelas]

Спасибо

Answer 3

[sharpsss]

вопрос более трех лет тому назад, но на всякий случай скину то что подошло мне )

background: url(../images/prototype_background.jpg) no-repeat center center fixed;
background-repeat: no-repeat;
-khtml-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;

Comments

[Данил Веников]

большое спасибо, работает

[sharpsss]

Данил Веников, на здоровье)9

Answer 4

[all_zer]

Не помогло...
на мобильном (вертикальном экране) все-таки снизу остается пустое место....
Использую так:

body {
background: url(../bg.jpg) no-repeat;
background-size: cover;
}

а на ПК - все отлично... ширина выходит за рамки браузера, и растягивается по высоте