Question

我有一个背景图片，我需要在整个页面的底部如下：

.background-div {
 top: 0px;
 left: 0px;
 width: 100vw;
 height: 100%;
 background-image: url('./assets/pattern.png');
 background-repeat: repeat;
 background-position: center;
 background-size: 40%;
 }

但是在一个视图中，有一段时间会进行数据获取，占据视图的一半，而背景只剩下一半我不知道当我放置 100vh 时如何解决它，如果内容很多的话切，如果我放 100%，它在获取数据时会被切成两半

Answer 1

您可以像这样制作整页图片：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
  height: 100%;
  margin: 0;
}
.background-div {
  /* The image used */
  background-image: url("assets/pattern.jpg");

  /* Full height */
  height: 100%; 
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
</head>
<body>
<div class="background-div"></div>
</body>
</html>

（来源：https://www.w3schools.com/howto/howto_css_full_page.asp）

制作完整的背景图片完整站点

1 个答案: