html - 使用css居中背景图像时水平查看问题

Question

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

这是我的CSS：

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

和我的jsfiddle：

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

score 2 · Accepted Answer

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

添加CSS ::

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

如果您希望滚动条查看完整图像，则不要使用该图像，background而是使用显示它<img src="" />

或者..

如果您仍然希望滚动条在设置为时显示完整图像，则将容器的（在您的情况下）backround设置为图像的实际高度min-heighthtml,body

1 回答 1