jquery mobile background image

Estoy construyendo un sitio móvil jQuery, y estoy tratando de insertar una imagen escalable en el fondo, que se ajustaría al tamaño de la pantalla del teléfono. Este es mi código:jquery mobile background image

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

Cuando la ventana está en pantalla completa, imagen de fondo que recibo, pero cuando cambia su tamaño/hacerla más pequeña (como la pantalla de los teléfonos), el ISN imagen 't cambiar de tamaño y no se centra, por lo que sólo se puede ver una parte de ella ...

Conectado archivos CSS jQuery y se descargan de jquerymobile.com

Fuente

2011-06-24 tokmak

Aquí es cómo escalo < img> etiquetas. Si desea convertirlo en una imagen de fondo, puede establecer su posición en absoluta, colocar la imagen donde desee (usando las declaraciones: arriba, abajo, izquierda, derecha) y establecer su índice z debajo del resto de su página.

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

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

Para implementar esta sólo tendría que colocar una etiqueta de imagen dentro del data-role = elemento de "página" de la página (s) que tiene la clase ".your_background_class_name" y el atributo src se establece en la imagen que quieres tener como fondo.

Espero que esto ayude.

Fuente

2011-06-24 15:57:23 Jasper

Gran solución Jasper, yo también tenía que hacer los siguientes elementos fondos transparentes - .ui páginas, .ui de contenido { \t fondo: transparente; } – SyntaxGoonoo

simplemente reemplace su clase con esto.

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

Tengo el mismo problema y lo resolví.

Fuente

2012-03-29 07:14:13 Mihir

Anulación de clase ui-página en su css:

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

Fuente

2012-03-29 07:24:08 boring

para jQuery móvil y PhoneGap este es el código correcto:

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

Fuente

2012-04-07 18:38:55 Paolo

Intenté esto, pero el fondo nunca aparece. En Firebug, parece que el estilo del cuerpo está anulado por el estilo .ui-overlay-c de JQM. –

De manera similar, no hay alegría al usar esto. – raf

Creo que su respuesta será background-size:cover.

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

Fuente

2012-10-04 21:27:48

Esto funcionó para mí (y no las respuestas anteriores)! – gsamaras

mi experiencia:

en algunas situaciones la imagen de fondo url se tienen que poner por separado para todas las partes de páginas - que utilizo:

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); 
    ... 
}

donde "Indexa" es el identificador de toda la página, y "contenta" y "footera" son id-s del contenido y pie de página , respectivamente.

Esto funciona con seguridad en PhoneGap + jQuery Mobile

Fuente

2012-12-07 19:59:33

Ninguna de las anteriores trabajó para mí usando JQM 1.2.0

Esto funcionó para mí:

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

Fuente

2013-01-07 08:46:30 raf

cosas buenas. Además de esto, agregue .ui-body-c, .ui-overlay-c {background: none;} para cancelar el fondo móvil de jQuery que se superpone a la imagen –

Éste me funciona pero la imagen de fondo también se muestra en menú izquierdo. Creo que es una muestra B. ¿Hay alguna forma de desactivar la muestra izquierda B o tener su propio fondo de color? JQM1.2.1 –

probar esto.Esto debería funcionar:

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

Fuente

2013-01-23 17:07:58

Solo agregue! Etiqueta importante a todos los elementos CSS en la respuesta de Paolo! Funciona bien para mí JQM + PhoneGap

Ejemplo:

body { 
    background: url(../images/background.jpg) !important;

Fuente

2013-09-24 08:26:26

Con JQM 1.4.2 éste funciona para mí (Cambiar tema al que se utiliza):

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

Fuente

2014-03-31 16:39:54 metamagicson

He encontrado esta respuesta funciona para mí

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

añadir también id="background" a la div para su sección de contenido

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

Fuente

2014-11-23 21:37:53 FLICKER

jquery mobile background image

Respuesta

Cuestiones relacionadas