CODEWITHSUNDEEP
jqueryhtmlcssjquery-mobile
user1061045
user1061045

Reputation: 173

Phonegap jQuery Mobile Background CSS issue - 1px at the bottom of the screen

I am having an issue with my background image. In the attached image you can see a 1px line at the bottom of the screen where the background has repeated. I want the background to fill the entire screen.

My CSS:

body {
    background: url(../img/bg-large.png) top center !important;
    background-attachment: fixed;
    background-size: auto 100% !important;
    overflow: hidden;
    text-shadow: none;
    padding: 0;
    font-family: 'Open Sans Condensed';
    width: 100%;
    font-size: 100%;
}

It does not seem to matter what resolution I view it on, the line is still there. Any suggestions on how to fix this? Background

Upvotes: 2

Views: 2419

Answers (1)

Omar
Omar

Reputation: 31732

in jQuery Mobile, body's height is set to 99.9%, that's why your image doesn't fill the page 100%. Override .ui-page class to fix this problem.

Demo

Upvotes: 2

Related Questions