Заполнение фонового изображения и его изменение в окне браузера

Question

Это тот эффект, который мне нужен для моего веб-сайта:

http://urban -walks.com / # nicer_way

Не такая уж причудливая сторона - у меня естьфоновые изображения для определенных «разделов» или div, и мне нужно, чтобы они заполнили все окно браузера.Они также должны изменить размер при изменении стороны браузера (например, с помощью мобильного телефона), чтобы сохранить эффект.

Это мой текущий код для каждого div -

HTML:

<div class="graph">
    <br><h1>Latest SKE Graph</h1>
    <img src="knowledge_graph.jpg">  
</div>

CSS:

.graph {
background-image: url("pexels-photo-279366.jpeg");
background-size: cover;
background-position: center;
height: 700px;
text-align: center;
}

Answer 1

Измените свой рост на «100vh» и ширину на «100vw».v обозначает порт просмотра устройства.

 .graph {
background-image: url("pexels-photo-279366.jpeg");
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
text-align: center;

}