jquery imagem de fundo móvel

Estou construindo um site móvel jQuery e estou tentando inserir uma imagem escalável em segundo plano, que se ajustaria ao tamanho da tela do telefone. Este é o meu código:

<!DOCTYPE html> 
<html> 
<head> 
<title>Discover Dubrovnik</title> 
<link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.0a4.1.min.js"></script>
<style type="text/css">
.ui-page {
    background: transparent url(image.gif);
}
</style>

</head> 
<body> 

<div data-role="page" data-theme="b">

<div data-role="header">
    <h1>Header tex</h1>
</div><!-- /header -->

<div data-role="content" data-theme="d">    
some text
    </div><!-- /content -->

<div data-role="footer">
<h1>Neki izbornik</h1>
</div>
</div><!-- /page -->

Quando a janela está em tela cheia, eu obtenho uma imagem de plano de fundo, mas quando a redimensiono / a menor (como a tela dos telefones), a imagem não é redimensionada e não é centralizada, de modo que posso ver apenas uma parte da imagem. isto..

Arquivos jQuery e CSS conectados são baixados de jquerymobile.com

questionAnswers(11)

yourAnswerToTheQuestion