使用css对中心背景图像时水平查看的麻烦

Question

我有一个简单的页面，其背景图像应始终水平居中。

这是我的css：

body {
    background-image: url(htts://url_to_my_image.png);
    background-position: top center;
    background-repeat: no-repeat;
}

和我的jsfiddle ：

当浏览器窗口不够高，无法适应整个图像时，会出现此问题。 我似乎无法滚动到页面的底部（因此无法查看图像的底部）。 我究竟做错了什么？

Answer 1

background-size: 100% 100%; 可以帮到你

更新后的

添加CSS ::

html,body{
background-size:100% 100%;
min-height:100%;
}

如果你想要一个滚动条来查看完整的图像，那么不要使用background使用该图像，但使用<img src="" />显示它

要么..

如果你仍然希望有一个滚动条来显示完整的图像，当它被设置为backround然后设置容器的min-height （在你的情况下， html,body ）等于图像的实际高度

制作背景图像滚动