背景图片没有显示完整的高度

Question

当页面正常时，我将背景图像设置为合适的大小，但是当我添加足够的文本时，您必须开始滚动，图像无法覆盖整个页面。图像比它显示的要高，但当我改变高度时，图像就变大了，我不知道如何显示图像的其余部分。有人知道怎么做吗?

.bc-grnd-img {
background-image: url("https://media.istockphoto.com/photos/little-cute-dumpy-frog-with-green-background-picture-id694848990?k=20&m=694848990&s=612x612&w=0&h=9tBJzT_Efz0GqI30Je72vvkqtSCQ5Deb_RRCdsG-e0c=");
filter: blur(8px);
-webkit-filter: blur(8px);
height: 500px;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
position: relative;
top: 0px;
z-index: -1;
}

<div class="bc-grnd-img"></div>

Answer 1

css设置错误我们不使用link for image, download image

.main{
width: 100%;
background: linear-gradient(to top, 
rgba(0,0,0,0.5)50%,rgba(0,0,0,0.5)50%), url(1.jpg);
background-position: center;
background-size: cover;
height: 109vh;
}

Answer 2

你的CSS很重，最终会导致一个缓慢的网站，使用Photoshop或Photopea确保你的图像是1920px宽，它可以像你喜欢的一样高，但记住图像越大，互联网越慢!

这段代码应该适合.....

background: url("img-name.jpg") 50% 50% no-repeat;
background-size: cover;

50/50应该让你的图像居中，不管它有多高，对于静态背景，我们可能不希望重复。

作为奖励，这也适用于视差背景，但图像必须高于显示区域。