Как правильно верстать фоновые изображения?

Question

[sinout]

Сейчас очень модно на лендингах делать фоновые изображения, которые занимают 100% высоты окна браузера. Одни делают это с помощью

html,body{
heigth:100%
}
header{
heigth:100%
}

Но, в таком случае body заканчивается сразу после header'а, который имеет 100% высоту.
Другие используют viewport-юниты, указывая header'у 100vh. Как правильно делать такие вещи и есть ли другие способы ? Как вы верстаете подобные вещи ?

Answer 1

[holymotion]

background-size:cover;

Comments

[sinout]

понятное дело что bg-size:cover, но как растягивать его на фулл скрин

[holymotion]

ну, я делаю как, блоку задаю высоту, вставляю картинку background'ом; bg-size:cover; ширина у блока 100% - ну и всё прекрасно работает

Answer 2

[Aligatro]

Можно привязать изображение прямо на body и задать ему bachground-size:cover, a контент на сайте вставлять через секции, и тогда контент должен быть позиционирован так как вам надо.

Если на body привязать изображение нельзя, тогда есть вариант создать еще 1 блок с изображением внутри и абсолютным позиционирование а высоту экрана считать при помощи js и задавать высчитанную высоту экрана через стили к изображению.

К сожалению я не совсем уверен, что правильно понял суть вашего вопроса.

Comments

[sinout]

например такая шапка как здесь: www.thomsoon.com/landing/index.html

[Aligatro]

Я понял, что вы имели ввиду. Я думаю, для того чтобы сохранить логичность и для того что-бы body имел реальную высоту а не высоту контейнера с фоном (с расположенным внутри контентом сайта), все же необходимо размещать все блоки в самом body.

А для изображения на первый экран высчитывать и задавать точную высоту при помощи 2 строк js или как вы написали при помощи vh. Не могу сказать что это красиво и изящно, но другого варианта, я не находил.

Js скорее всего будет предпочтительней если нужна поддержка старых браузеров.

[sinout]

Aligatro: спасибо за совет

[Aligatro]

О нет нет, это ни в коем случае не совет =) Я сам еще тот профан у которого опыта не так много. Просто мнение, не более -)

Answer 3

[Артем Зинкин]

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