使用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%;可以帮助您

<强> UPDATED FIDDLE

ADDED CSS ::

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

如果您想要滚动条查看完整图像，请不要使用background使用该图片，而是使用<img src="" />

显示

或..

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

<强> MAKING BACKGROUND IMAGE SCROLL