CODEWITHSUNDEEP
javascriptjqueryhtmlcss
kid.abr
kid.abr

Reputation: 330

Scroll background image on the body on resize

I want an image on the body of the website, for which I am using this CSS:

body {
    background-color: #000;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-image: url(image.jpg);
    background-repeat: no-repeat;
    background-position:center top; 
}

When I resize the browser I wish to see the scrollbar appearing so that image can be scrolled. What am I missing?

Upvotes: 1

Views: 181

Answers (1)

dashtinejad
dashtinejad

Reputation: 6253

You should set min-width and min-height for your body based on width and height of your image:

body {
    background-color: #000;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-image: url(http://theactsoftheapostles.com/images/yesu-ki-jai-bg.jpg);
    background-repeat: no-repeat;
    background-position:center top; 
    min-width: 1390px;
    min-height: 903px;
}

JSFiddle Demo.

However I think it's better to avoid using horizontal scrollbar.

Upvotes: 1

Related Questions