背景图像填充和调整大小以适应浏览器 window

Question

这是我的网站需要的效果：

这不是花哨的一面 - 我有某些 'sections' 或 div 的背景图片，我需要它们填充整个浏览器 window。他们还需要在更改浏览器端（例如使用移动端）时调整大小，以保持效果。

这是我当前每个 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;

}

背景图像填充和调整大小以适应浏览器 window

Background Image filling and resizing to browser window

html

css

parallax