[英]Trouble with horizontal viewing when centering background image using css
I have a simple page which should always have its background image centered horizontally. 我有一个简单的页面,其背景图像应始终水平居中。
Here is my css: 这是我的css:
body {
background-image: url(htts://url_to_my_image.png);
background-position: top center;
background-repeat: no-repeat;
}
and my jsfiddle : 和我的jsfiddle :
The problem occurs when the browser window isn't tall enough to fit the entire image. 当浏览器窗口不够高,无法适应整个图像时,会出现此问题。 I seem to be unable to scroll to the bottom of the page (thus cannot view the bottom of the image).
我似乎无法滚动到页面的底部(因此无法查看图像的底部)。 What am I doing wrong?
我究竟做错了什么?
background-size: 100% 100%;
may help you 可以帮到你
ADDED CSS :: 添加CSS ::
html,body{
background-size:100% 100%;
min-height:100%;
}
and if you want a scroll bar to view the full image then dont use that image using background
but display it using <img src="" />
如果你想要一个滚动条来查看完整的图像,那么不要使用
background
使用该图像,但使用<img src="" />
显示它
OR.. 要么..
if you still want to have a scroll bar to show the full image while it is set as backround
then set the min-height
of your container (in your case html,body
) equals to the actual height of the image 如果你仍然希望有一个滚动条来显示完整的图像,当它被设置为
backround
然后设置容器的min-height
(在你的情况下, html,body
)等于图像的实际高度
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.