Изображение 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

Ответы

Ответ 1

Для 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>

Ответ 2

Ни один из вышеперечисленных не работал у меня с использованием JQM 1.2.0

Это работало для меня:

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

Ответ 3

Думаю, ваш ответ будет background-size:cover.

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

Ответ 4

Вот как я масштабирую <img> теги. Если вы хотите сделать это фоновым изображением, вы можете установить его абсолютное положение, поместите изображение туда, где хотите (используя: верхние, нижние, левые, правые объявления) и установите его z-index ниже остальной части вашей страницы.

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

Чтобы реализовать это, вы просто поместите тег изображения внутри элемента data-role = "page" на своих страницах с классом ".your_background_class_name" и атрибутом src, установленным на изображение, которое вы хотите использовать как ваш фон.

Надеюсь, это поможет.

Ответ 5

Попробуйте это. Это должно работать:

<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

просто замените свой класс на это.

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

У меня такая же проблема, и я решил ее.

Ответ 7

Просто добавьте важный тег ко всем элементам css в ответе Паоло! Прекрасно работает для меня JQM + телефонная задержка

Пример:

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

Ответ 8

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

Ответ 9

Я нашел, что этот ответ работает для меня

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

также добавить id="background" в div для вашего раздела контента

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

Ответ 10

Переопределите класс ui-страницы в вашем css:

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

Ответ 11

мой опыт:

в некоторых ситуациях 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" - это идентификатор всей страницы, а "contenta" и "footer" - id-s содержание и нижний колонтитул соответственно.

Это работает в PhoneGap + jQuery Mobile