Imagem Background com Phonegap

[CrazyLOL 2]

Galera, estou desenvolvendo um aplicativo com phonegap e cheguei na seguinte situacao..

Preciso adicionar uma tela de fundo no login, porem preciso que ela fique de forma organizada em cada tela de um dispositivo mobile, atualmente eu tenho a minha imagem mas ela fica desprorpocional na tela...

Ai entra a minha duvida, eu preciso criar uma imagem para cada tamanho de tela? E se eu preciso criar para cada tela, como que faço para o meu CSS reconhecer determinado tamanho, a imagem? Ou, nao é necessario criar varias imagens apenas uma resolve?

 

Lembrando que também o aplicativo pode ser virado verticalmente e horizontalmente, ai a imagem tambem precisaria seguir este movimento.

 

Aguardo uma ajuda..

 

Agradeço antecipadamente!!!!

[leonardo de andrade baessa 16]

Boa tarde meu amigo, procure aqui mesmo nos tópicos passados Por Site Responsivo.

Ou ver no YouTube "Site responsivo"

[CrazyLOL 2]

Apenas o Responsivo não ia da certo..

Porém encontrei algo na internet falando sobre Media Queries do CSS e estou trabalhando com elas, porém encontrei um pequeno problema..

Eu estou fazendo imagens de fundos para vários tamanhos de telas de aparelho, assim fica organizado e da maneira "certa" no aparelho. exemplo:

/* ----------- Galaxy S3 ----------- */

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px)   
  and (orientation: portrait) {
    .fundos-login {
      background: url(../img/background/android/s3/s3port.png) no-repeat center center; 
      background-attachment:fixed;
      width: 100%;
      height: 100%;
    }

    .fundos-empty {
      background: url(../img/background/android/s3/s3port-empty.png) no-repeat center center; 
      background-attachment:fixed;      
    }

    .login-form {      
      margin-top: 180px !important;
    }
}

/* Landscape */
@media screen 
  and (device-width: 640px) 
  and (device-height: 320px)   
  and (orientation: landscape) {
    .fundos-login {
      background: url(../img/background/android/s3/s3land.png) no-repeat center center; 
      background-attachment:fixed;
      width: 100%;
      height: 100%;
    }

    .fundos-empty {
      background: url(../img/background/android/s3/s3land-empty.png) no-repeat center center; 
      background-attachment:fixed;      
    }

    .login-form {      
      margin-top: 160px !important;
    }
}

Porém estou com uma duvida,

como que eu posso fazer uma imagem grande e depois ajustar ela para outras telas, por que hoje temos N telas de aparelhos com N tamanhos e fazer uma pra cada uma vai demorar um bom tempo, nesse momento eu fiz apenas para as principais...

 

Qual o tamanho que eu poderia fazer para a imagem principal para assim que redimensionar não perder qualidade?