html - 背景图像填充和调整到浏览器窗口

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;
}

标签： htmlcssparallax

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;

}