Question

Aim :- to set background image in my application that fills the device both in portrait and landscape mode

Tool used: Phonehgap with eclipse

Problems encountering:-

• 1)my image is fitting according to device width in portrait mode but
  case is not same in case of height it fills only 50% of the device
• 2)on switching to landscape mode in android emulator the image
  flashes and disappear in 2 secs

Codes added by me after googling:-

1) in main.xml

  <WebView android:id="@+id/appView"
            android:layout_height="fill_parent"
            android:layout_width="fill_parent"
      />

2)in activity.java

import android.util.Log;
import android.view.Display;
import android.webkit.WebSettings.RenderPriority;
import android.view.WindowManager;
import android.content.Context;

3) in index page

  <meta name="viewport" content="target-densitydpi=device-dpi"  />
or 
<meta name="viewport" content="user-scalable=no, width=device-width" />
<link rel="stylesheet" href="homepage.css" type="text/css" media="only screen and (max-width: 480px)"/>

Note:- rest of the code is simple html and css and all that phone gap modification we have to do

Favour i want:- while telling code please tell also where to include that also, as i am new to eclipse and phonegap

thanx in advance

Answer 1

use jquery mobile and do no make any changes in tool using as platform (say eclipse for android)
and filling image to size of device is simple css

{
 background-image:url('Images/indeximage.jpg');
 background-size: 100% 100%;
 background-repeat:no-repeat;
 background-position:100% 100%;
 top: 0px;
 left: 0px;

}