我试图将此图像设置为页面的背景，无论出于何种原因，它都无法正常工作。目的是使背景图像覆盖页面，而不是垂直或水平裁剪。
注意：CSS文件已连接到文档。
HTML:
<body>
<main>
<h2 id="cityName">
</h2>
<div id="weatherIcon">
<img id="weatherIconImg"/>
</div>
</main>
</body>
CSS:
body {
background-image: url("https://firebasestorage.googleapis.com/v0/b/production2hats.appspot.com/o/studentPortal%2Fassessment-web-app-essentials%2Fbackground.jpg?alt=media&token=d0e6837f-d037-4fee-97b6-313c8ea6aa80");
background-repeat: no-repeat;
-webkit-background-size: cover fixed;
-moz-background-size: cover fixed;
-o-background-size: cover fixed;
background-size: cover fixed;
}
希望这对你有用：
body {
min-height: 100vh;
min-width: 100vw;
background-image: url("https://firebasestorage.googleapis.com/v0/b/production2hats.appspot.com/o/studentPortal%2Fassessment-web-app-essentials%2Fbackground.jpg?alt=media&token=d0e6837f-d037-4fee-97b6-313c8ea6aa80");
background-size: 100% 100%;
background-attachment: fixed;
}<main>
<h2 id="cityName">
</h2>
<div id="weatherIcon">
<img id="weatherIconImg"/>
</div>
</main>你应该尝试background-size: Cover;可能是一个图像将从右或底切，但与background-size: 100% 100%;图像可以拉伸。这完全取决于图像大小。
请不要使用此css属性“background-repeat：no-repeat;”如果你想要全屏图像。
实际上你可以用两种方式解决这个问题。 1.如果屏幕尺寸很大，请使用全图像并重复图像2.将图像拉伸至全宽。
请看下面的代码：
body {
background-image: url("https://firebasestorage.googleapis.com/v0/b/production2hats.appspot.com/o/studentPortal%2Fassessment-web-app-essentials%2Fbackground.jpg?alt=media&token=d0e6837f-d037-4fee-97b6-313c8ea6aa80");
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
} <h2 id="cityName"></h2>
<div id="weatherIcon">
<img id="weatherIconImg"/>
</div>另一种方法在这里。
body {
min-height: 100vh;
min-width: 100vw;
background-image: url("https://firebasestorage.googleapis.com/v0/b/production2hats.appspot.com/o/studentPortal%2Fassessment-web-app-essentials%2Fbackground.jpg?alt=media&token=d0e6837f-d037-4fee-97b6-313c8ea6aa80");
background-size: 100% 100%;
} <h2 id="cityName"></h2>
<div id="weatherIcon">
<img id="weatherIconImg"/>
</div>