Как правильно вставить фоновую картинку в header?

Question

[froggush]

Доброго времени суток. Подскажите, пожалуйста, как правильно вставить фоновую картинку в header на высоту экрана?
вставляю так:

.header{
  background-image: url(...);
  height: 100vh;
  background-size: cover;
}

Всё бы ничего, но при уменьшении масштаба страницы картинка не масштабируется, остаётся прежних размеров и всё так же занимает высоту целого экрана, когда весь контент уменьшается.
Подскажите, стоит ли вообще продумывать поведение страницы при уменьшении масштаба?

Answer 1

[Иван Батурин]

Подскажите, стоит ли вообще продумывать поведение страницы при уменьшении масштаба?

Это называется адаптивный дизайн - одна из основных вещей качественного сайта. Делать стоит обязательно, если хотите получить действительно хорошую оценку своей работы.

По вопросу о картинке, попробуйте так:

.header {
background: url("<ваше изображение>") no-repeat;
background-size: contain;
background-position: center;
}

Comments

[Иван Батурин]

И проверьте масштабируется ли у вас сам .header, может в нем проблема

[Василий Марков]

Сделал, как в ответе на вопрос, но почему-то не работает. Код:

<div class="container">
    <header class="header"></header>
    <section id="l">L</section>
    <section id="r">R</section>
    <footer>Footer</footer>
</div>

header {
    background-image: url(images/header.png) no-repeat;
    background-size: contain;
    background-position: center;
}

В сети нашел еще несколько аналогичных решений, но... у меня почему-то не работает. Никто не знает почему?

Answer 2

[Kirill Makarov]

100 vh означает 100% высоты экрана.