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
Vous devez vous connecter pour publier un commentaire.
Pour jquery mobile et phonegap c'est le bon code:
Aucun des ci-dessus a fonctionné pour moi à l'aide de JQM 1.2.0
Cela a fonctionné pour moi:
Je pense que votre réponse sera
background-size:cover
.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.
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.
De l'essayer. Cela devrait fonctionner:
juste simple de remplacer votre classe avec cette.
J'ai le même problème et je l'ai résolu.
Juste ajouter !important balise à tous les css des éléments de Paolo réponse! Fonctionne très bien pour moi JQM+phonegap
EXEMPLE:
Avec JQM 1.4.2 celui-ci fonctionne pour moi (Changer de thème pour la une):
J'ai trouvé cette réponse qui fonctionne pour moi
également ajouter
id="background"
à la div pour votre contenu de l'articleRemplacer l'interface utilisateur-classe de la page dans votre css:
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:
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