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

Use background-size propery in css3

eg

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

IE hack (for lower than IE9)

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

It fits background image to your screen & still maintain aspect ratio of image.

Here is a good tutorial for you, Click Here

Answer 2

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