背景图像填充和调整大小到浏览器窗口

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

将你的身高改为＆＃34; 100vh＆＃34;和你的宽度为＆＃34; 100vw＆＃34;。 v代表设备的视口。

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

}