jquery mobile image d'arrière-plan

Je suis en construction d'un site jQuery mobile, et j'essaie d'insérer une image évolutive dans l'arrière-plan, ce qui permettra d'adapter la taille de l'écran du téléphone.
C'est 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 de fond, mais quand je le redimensionner/le rendre plus petit (comme l'écran du téléphone), l'image n'est pas redimensionnée, et il n'est pas centré, donc je ne vois qu'une seule partie de celui-ci...

Connecté jQuery et CSS les fichiers sont téléchargés à partir d'jquerymobile.com

InformationsquelleAutor tokmak | 2011-06-24
  1. 23

    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>
    • J'ai essayé ceci, mais le fond ne se présente jamais. Dans Firebug, il semble que le style de corps est remplacé par .ui-overlay-c style de JQM.
    • De même pas de joie à l'aide de ce.
    • Dans le cas où quelqu'un a été vous demandez-vous, cela ne fonctionne toujours pas.
    InformationsquelleAutor Paolo
  2. 20

    Aucun des ci-dessus a fonctionné pour moi à l'aide de 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;  
}
    • De bonnes choses. En plus de cet ajout .ui-corps-c, .ui-overlay-c { background: none;} pour annuler l'jQuery mobile de fond qui se superpose à l'image
    • Ce un travail pour moi, mais l'image d'arrière-plan affiche également dans le menu de gauche. J'ai cru que c'est swatch B. Est-il de toute façon à désactiver l'échantillon de gauche B ou avoir propre fond d'écran. JQM1.2.1
    InformationsquelleAutor raf
  3. 10

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

    .ui-page
{
background: #000;
background-image:url(image.gif);
background-size:cover;  
}
    • Cela a fonctionné pour moi (et pas les réponses ci-dessus)!
    InformationsquelleAutor ofer ziv
  4. 6

    Voici comment je l'échelle <img> balises. Si vous souhaitez faire une image d'arrière-plan vous pouvez régler la position de l'absolu, de la place de l'image où vous voulez (à l'aide de l': haut, bas, gauche, droite déclarations), et de l'ensemble de z-index ci-dessous le reste de votre page.

    //exemple simple 
.your_class_name { 
width: 100%; 
height:auto; 
} 

    //image de fond exemple 
.your_background_class_name { 
width: 100%; 
height:auto; 
top: 0px; 
left: 0px; 
z-index: -1; 
position: absolute; 
}

    Pour mettre en œuvre cette vous suffit de placer une balise d'image à l'intérieur de la data-role="page" un élément de votre page(s) qui a l' ".your_background_class_name" de la classe et de l'attribut src défini à l'image que vous voulez avoir votre arrière-plan.

    J'espère que cette aide.

    • Excellente solution Jasper, j'ai aussi besoin de faire les éléments suivants milieux transparents -- .interface utilisateur-page.l'interface utilisateur du contenu{ background: transparent; }
    InformationsquelleAutor Jasper
  5. 6

    De l'essayer. 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">
    InformationsquelleAutor Lars
  6. 1

    juste simple de remplacer votre classe avec cette.

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

    InformationsquelleAutor Mihir
  7. 1

    Juste ajouter !important balise à tous les css des éléments de Paolo réponse! Fonctionne très bien pour moi JQM+phonegap

    EXEMPLE:

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

    Avec JQM 1.4.2 celui-ci fonctionne pour moi (Changer de thème pour la une):

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

    J'ai trouvé cette réponse qui fonctionne pour moi

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

    également ajouter id="background" à la div pour votre contenu de l'article

    <div data-role="page" data-theme="a">
  <div data-role="main" class="ui-content" id="background">
  </div>
</div>
    InformationsquelleAutor FLICKER
  10. 0

    Remplacer l'interface utilisateur-classe de la page dans votre css:

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

    mon expérience:

    dans certaines situations, l'url de l'image d'arrière-plan doivent être mis séparément pour toutes les parties de pages -
    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 le "contenta" et "footera" sont id-s de la
    le contenu et le pied de page, respectivement.

    Cela fonctionne pour vous dans PhoneGap + jQuery Mobile

    InformationsquelleAutor Stancho Stanchev