Trouble with horizontal viewing when centering background image using css

Question

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?

Answer 1

background-size: 100% 100%; may help you

UPDATED FIDDLE

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

MAKING BACKGROUND IMAGE SCROLL