使用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 ）等於圖像的實際高度

制作背景圖像滾動