固定的背景图像具有完整的窗口拉伸，并且在滚动时不重复吗？

Question

我想拉伸背景图像，并使其在浏览器窗口中垂直垂直100％，水平100％。始终固定。同样，当用户向下或向上滚动时。背景图像应填满整个窗口。调整浏览器窗口的大小时，背景图像应拉伸并保持不变。

我尝试了许多不成功的版本后到目前为止所拥有的东西：

background image stretch

我的CSS代码：

body, html {
width: 100%;
height: 100%;
margin: 0;


  background: url(https://i-cdn.phonearena.com/images/article/125256-two_lead/Android-11-R-Preview-A-quality-of-life-update.jpg);
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover;    /* Mozilla*/
-o-background-size: cover;      /* Opera*/
background-size: cover;         /* Generic*/

}

Answer 1

您好，您可以使用此代码来实现您希望使用背景记录和大小的目标。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  width: 100%;
  height: 100vh;
  background-image: url(YourImagePath);
  background-repeat: no-repeat;
  background-size: cover;
}