jquery mobile background image

Buduję witrynę mobilną jQuery i próbuję wstawić skalowalny obraz w tle, który dostosowałby się do rozmiaru ekranu telefonu. To jest mój kod: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 -->

Kiedy okno jest w trybie pełnoekranowym, mam obrazu tła, ale po zmianie rozmiaru go/je pomniejszyć (jak na ekranie w telefonach), ISN obraz „t zmieniany i nie jest wyśrodkowany, więc mogę zobaczyć tylko jedną jego część ...

Connected jQuery i pliki CSS są pobierane z jquerymobile.com

Źródło

2011-06-24 tokmak

Oto jak skalować < img> tagi. Jeśli chcesz, aby był to obraz tła, możesz ustawić jego pozycję absolutną, umieścić obraz w wybranym miejscu (za pomocą: górnych, dolnych, lewych, prawych deklaracji) i ustawić go z-index poniżej reszty strony.

 
//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; 
}

Aby to realizować będzie po prostu umieścić tag obrazu wewnątrz data-role = „strona” element swojej stronie (ach), które posiada klasę „.your_background_class_name” i atrybut src ustawiony obrazek, który chcesz mieć jako tło.

Mam nadzieję, że to pomoże.

Źródło

2011-06-24 15:57:23 Jasper

Świetne rozwiązanie Jasper, potrzebne również do następujących elementów tła przezroczysty - .ui stronie, .ui-content { \t background: transparent; } – SyntaxGoonoo

po prostu zastąp swoją klasę tym.

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

Mam ten sam problem i rozwiązałem go.

Źródło

2012-03-29 07:14:13 Mihir

Zastąp klasy ui stron w css:

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

Źródło

2012-03-29 07:24:08 boring

dla jQuery komórkowego i PhoneGap jest to poprawny kod:

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

Źródło

2012-04-07 18:38:55 Paolo

Próbowałem tego, ale tło nigdy się nie pojawiło. W Firebug wygląda na to, że styl ciała jest przesłonięty przez styl .ui-overlay-c od JQM. –

Podobnie nie ma radości z tego używania. – raf

Myślę, że odpowiedź będzie background-size:cover.

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

Źródło

2012-10-04 21:27:48

To działało dla mnie (a nie odpowiedzi powyżej)! – gsamaras

moje doświadczenie:

w niektórych sytuacjach url tła muszą być wprowadzane oddzielnie dla każdej części strony - używam:

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

gdzie "indexA" jest id cała strona, a "contenta" i "footera" to odpowiednio id-s zawartości i stopki .

Działa to na pewno w PhoneGap + jQuery Mobile

Źródło

2012-12-07 19:59:33

Żadne z powyższych pracował dla mnie za pomocą JQM 1.2.0

ta nie działa dla mnie:

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

Źródło

2013-01-07 08:46:30 raf

Dobre rzeczy. Oprócz tego dodaj: .ui-body-c, .ui-overlay-c {background: none;}, aby skasować tło mobilne jQuery, które nakłada się na obraz –

To jedno działa dla mnie, ale obraz tła jest również pokazany w lewe menu. Uwierzyłem, że to próbka B. Czy mimo to wyłączyć lewą próbkę B lub mieć własne tło. JQM1.2.1 –

Spróbuj tego.To powinno zadziałać:

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

Źródło

2013-01-23 17:07:58

Po prostu dodaj ważny znacznik do wszystkich elementów css w odpowiedzi Paola! Działa to dobrze dla mnie JQM + PhoneGap

PRZYKŁAD:

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

Źródło

2013-09-24 08:26:26

Z JQM 1.4.2 to jeden pracuje dla mnie (Zmień motyw, aby był używany):

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

Źródło

2014-03-31 16:39:54 metamagicson

Znalazłem odpowiedź działa na mnie

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

również dodać id="background" do div do sekcji partnerskiej

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

Źródło

2014-11-23 21:37:53 FLICKER

jquery mobile background image

Odpowiedz

Powiązane problemy