Background image sizes for diferente mobile devices with Phongap

Question

I am developing an app for iOS and Android using Phonegap.

I want to use a background-image but since all mobile devices have different sizes my background image gets either cut or distorted.

For the splash screen (which is also a fullscreen image) I can define different images for different devices

Is there something similar that I can do for my background-image?

Answer 1

No, you can't do that with cordova configuration.

But you can css and media query:

#my-app-container {
    @media screen and (max-width: 320) {
        background-image('/iphone4s-background.jpg');
    }
    @media screen and (max-width: 420) {
        background-image('/bigger-background.jpg');
    }
    /* others */
}

Another way (but not better from my point of view) is to detect window size in js, changing then the background image from code (e.g. with jquery).