web-dev-qa-db-ja.com

jqueryモバイル背景画像

私はjQueryモバイルサイトを構築しており、スケーラブルな画像をバックグラウンドに挿入しようとしています。これにより、電話の画面サイズに調整されます。これは私のコードです：

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

ウィンドウがフルスクリーンの場合、背景画像が表示されますが、サイズを変更したり小さくしたりすると（携帯電話の画面のように）、画像のサイズが変更されず、中央に配置されないため、一部しか表示されません...

接続されたjQueryおよびCSSファイルはjquerymobile.comからダウンロードされます

jquerycssjquery-mobile
26
tokmak

Jquery mobileとphonegapの場合、これは正しいコードです。

<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

JQM 1.2.0を使用して上記のいずれも機能しませんでした

これは私のために働いた：

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

あなたの答えはbackground-size:cover。

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

これが<img>タグのスケーリング方法です。背景画像にしたい場合は、位置を絶対に設定し、目的の場所に画像を配置し（上、下、左、右の宣言を使用）、ページの残りの下にzインデックスを設定します。

 // simple example 
。your_class_name {
 width：100％; 
 height：auto; 
} 

 // background image example 
。your_background_class_name {
 width：100％; 
 height：auto; 
 top：0px; 
左：0px; 
 z-index：-1; 
 position：absolute; 
}

これを実装するには、ページのdata-role = "page"要素内に画像タグを配置します。この要素には、「。your_background_class_name」クラスと、背景として使用する画像に設定されたsrc属性があります。

これがお役に立てば幸いです。

6
Jasper

これを試して。これは動作するはずです：

<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

私はこの答えが私のために働くことがわかった

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

コンテンツセクションのdivにもid="background"を追加します

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

クラスをこれに置き換えるだけです。

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

同じ問題があり、解決しました。

1
Mihir

JQM 1.4.2では、これは私のために機能します（テーマを使用済みのものに変更します）：

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

Paoloの答えのすべてのcss要素に！importantタグを追加するだけです！私にとってはうまくいくJQM + phonegap

例：

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

CSSでui-pageクラスをオーバーライドします。

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

私の経験：

状況によっては、背景画像のURLをすべてのページパーツに個別に配置する必要があります。

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

ここで、「indexa」はページ全体のIDであり、「contenta」と「footera」はそれぞれコンテンツとフッターのIDです。

これはPhoneGap + jQuery Mobileで確実に機能します

0
Stancho Stanchev