Cross platform full screen HTML5 background images with apache cordova

Question

In short, How to design the full screen background images (maintaining the aspect ratio) for HTML5 (to be ported to different platforms/ devices)?

Im using Intel XDK/ Apache cordova-3.x for building an HTML5 app. From this link i understand, that i can configure different images for the splash screen/ icon for different resolutions/ screen sizes.

And Is there any way i can specify my background images just like the splash screen image? Or should i use a responsive HTML design as mentioned at this link?

Answer 1

I recommend using responsive design leveraging CSS for setting your images' height and width to 100% or use media queries for various screen sizes.

For example,

/*Background Full Screen Image*/ 
body {
    background: url("images/img.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/*Background Full Screen Image if the document is smaller than 300 pixels wide*/
@media screen and (max-width: 300px) {
   body {
        background: url("images/img.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
   }
}