Как сделать адаптивный фон-картинку (проблема с высотой при увеличении размера экрана)?

Question

[Василий Петров]

Вроде сделал все верно, но... почему-то фоновая картинка не хочет подгоняться под высоту экрана? В чем ошибка?

body {
	margin: 0px;
	padding: 0px;
	min-width: 320px;
	position: relative;
	overflow-x: hidden;
}
#main {
	background-image: url(../images/tym2.jpg);
	background-position: top center;
	background-attachment: fixed;
	min-height: 668px;
	position: relative;
	-webkit-background-size: cover;
	background-size: cover;
}

Answer 1

[Милок Мурлыка]

Судя по стилям, у вас блок #main занимает 668px, а окно открыто на 785px

Простой способ растянуть блок на всю высоту экрана

Comments

[Василий Петров]

Ну, так вот и проблема. При увеличении высоты картинка должнатоже увеличиваться. По ширине все нормально, а по высоте вот нет

[Милок Мурлыка]

Василий Петров: фоновая картинка не может становится больше самого блока, у вас блок не растягивается по высоте и картинка не должна

[Милок Мурлыка]

Василий Петров: Если хотите что бы каждый блок занимал 100% высоты экрана задайте это как-то явно либо используйте специальные плагины. А так судя по скрину и коду высота фона == высоте блока, а высота блока != высоте экрана

[Милок Мурлыка]

Василий Петров: добавил в ответ ссылку которая может вам помочь

[Василий Петров]

Милок Мурлыка: спасибо, height: 100vh решил проблему

Answer 2

[Albert Kazan]

background-size: auto 100%; (не помню первое или второе отвечает за высоту)

Answer 3

[Николай]

Эти три параметра

background-image: url(../images/tym2.jpg);
background-position: top center;
background-attachment: fixed;

замените на
background: url("../images/tym2.jpg") top center;

Answer 4

[Владимир Куликов]

background: вставляешь фон ( можно background-image);
background-size: cover; (растягивается по ширине экрана с сохранением пропорций)