I have a simple page which should always have its background image centered horizontally.
Here is my css:
body {
background-image: url(htts://url_to_my_image.png);
background-position: top center;
background-repeat: no-repeat;
}
and my 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 ::
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="" />
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.