web-dev-qa-db-fra.com

image de fond mobile jquery

Je crée un site mobile jQuery et j'essaie d'insérer une image évolutive en arrière-plan, qui s'adapterait à la taille de l'écran du téléphone. Voici mon code:

<!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 -->

Lorsque la fenêtre est en plein écran, j'obtiens l'image d'arrière-plan, mais lorsque je la redimensionne/la rend plus petite (comme l'écran des téléphones), l'image n'est pas redimensionnée et elle n'est pas centrée, donc je ne peux en voir qu'une partie ...

Les fichiers jQuery et CSS connectés sont téléchargés depuis jquerymobile.com

jquerycssjquery-mobile
26
tokmak

Pour jquery mobile et phonegap, c'est le bon code:

<style type="text/css">
body {
    background: url(imgage.gif);
    background-repeat:repeat-y;
    background-position:center center;
    background-attachment:scroll;
    background-size:100% 100%;
}
.ui-page {
    background: transparent;
}
.ui-content{
    background: transparent;
}
</style>
23
Paolo

Rien de ce qui précède n'a fonctionné pour moi en utilisant JQM 1.2.0

Cela a fonctionné pour moi:

.ui-page.ui-body-c {
    background: url(bg.png);
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;  
}
20
raf

Je pense que votre réponse sera background-size:cover.

.ui-page
{
background: #000;
background-image:url(image.gif);
background-size:cover;  
}
10
ofer ziv

Voici comment je redimensionne les balises <img>. Si vous souhaitez en faire une image d'arrière-plan, vous pouvez définir sa position sur absolu, placer l'image où vous le souhaitez (en utilisant les déclarations: haut, bas, gauche, droite) et définir son index z sous le reste de votre page.

 // exemple simple 
. votre_nom_classe {
 largeur: 100%; 
 hauteur: auto; 
} 

 // exemple d'image d'arrière-plan 
. your_background_class_name {
 largeur: 100%; 
 hauteur: auto; 
 haut: 0px; 
 gauche: 0px; 
 z-index: -1; 
 position: absolu; 
}

Pour l'implémenter, il vous suffit de placer une balise image à l'intérieur de l'élément data-role = "page" de vos pages qui a la classe ".your_background_class_name" et l'attribut src défini sur l'image que vous souhaitez avoir comme arrière-plan.

J'espère que ça aide.

6
Jasper

Essaye ça. Cela devrait fonctionner:

<div data-role="page" id="page" style="background-image: url('#URL'); background-attachment: fixed; background-repeat: no-repeat; background-size: 100% 100%;"
    data-theme="a">
6
Lars

J'ai trouvé que cette réponse me convenait

<style type="text/css">
#background{ 
position: fixed; 
top: 0; 
left: 0; 
width: 100% !important; 
height: 100% !important; 
background: url(mobile-images/limo-service.jpg) no-repeat center center fixed !important; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
z-index: -1; 
} 
.ui-page{ 
background:none; 
}
</style>

ajoutez également id="background" au div pour votre section de contenu

<div data-role="page" data-theme="a">
  <div data-role="main" class="ui-content" id="background">
  </div>
</div>
1
FLICKER

remplacez simplement votre classe par ceci.

.ui-page
{
   background: transparent url(images/EarthIcon.jpg) no-repeat center center;
}

J'ai le même problème et je l'ai résolu.

1
Mihir

Avec JQM 1.4.2, celui-ci fonctionne pour moi (changer le thème en celui utilisé):

.ui-page-theme-b, .ui-page-theme-b .ui-panel-wrapper {
    background: transparent url(../img/xxx) !important;
    background-repeat:repeat !important;
}
1
metamagikum

Ajoutez simplement! Tag important à tous les éléments css dans la réponse de Paolo! Fonctionne bien pour moi JQM + phonegap

EXEMPLE:

body {
    background: url(../images/background.jpg) !important;
1
426 - Your digital upgrade

Substituez la classe ui-page dans votre css:

.ui-page {
    background: url("image.gif");
    background-repeat: repeat;
}
0
user235273

mon expérience:

dans certaines situations, l'url de l'image d'arrière-plan doit être placée séparément pour toutes les parties de la page - J'utilise:

var bgImageUrl = "url(../thirdparty/icons/Android-circuit.jpg)";

...

$('#indexa').live('pageinit', function() {

   $("#indexa").css("background-image",bgImageUrl);
   $("#contenta").css("background-image",bgImageUrl);
   $("#footera").css("background-image",bgImageUrl);
   ...
}

où "indexa" est l'id de la page entière, et les "contenta" et "footera" sont les id-s du contenu et du pied de page respectivement.

Cela fonctionne à coup sûr dans PhoneGap + jQuery Mobile

0
Stancho Stanchev