Page background image scaling for different resolution devices

Question

Here is what I need to do. I need to make a mobile app for ipad and iphone using phonegap and I need to set image background to all pages in the application. I was thinking to use a .png image in high resolution (the highest one I will be supporting), but I am not sure how to handle image re-sizing when the aspect ration is not kept. For example if I use image that is 1136X640 (iphone5) how it will look on iphone4 (res: 960 x 640). Or should I check the device and provide different images for different devices? Please help.

Answer 1

You can add the image as background in CSS like this :

body{
    background-image:url('your_url');
    background-size:cover;
}

This way it will fill your body