Cordova gray background color

Question

I'm new to Cordova/PhoneGap development. When deploying to an iPhone, I noticed this light gray background color behind the app. It's noticeable when the device rotates from portrait to landscape (and vice versa). You can also see it when scrolling up or down with the default start app. The ripple emulator doesn't have this effect.

Any idea where this color comes from and how to override it? I tried modifying config.xml with . I can certainly set the body's css background color, but this does not change the gray background.

Below are some screenshots from the iPhone, where you can see the gray background when rotating or scrolling up with the default sample app.

ios screenshot 1 ios screenshot 2

Answer 1

You have to change the background color of body tag in index.css file which is located at www/css/index.css

Hope it helps you

Answer 2

Commenting out all the background properties in index.css solved it for me:

body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */

    /*background-color:#E4E4E4;
    background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image:-webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #A7A7A7),
        color-stop(0.51, #E4E4E4)
    );
    background-attachment:fixed;*/

    font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
    font-size:12px;
    height:100%;
    margin:0px;
    padding:0px;
    text-transform:uppercase;
    width:100%;
}