jquery мобильное фоновое изображение - PullRequest
Новая
       6

jquery мобильное фоновое изображение

26 голосов
/ 24 июня 2011

Я создаю мобильный сайт 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

Ответы [ 11 ]

23 голосов
/ 07 апреля 2012

Для 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>
20 голосов
/ 07 января 2013

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

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

.ui-page.ui-body-c {
    background: url(bg.png);
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;  
}
10 голосов
/ 05 октября 2012

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

.ui-page
{
background: #000;
background-image:url(image.gif);
background-size:cover;  
}
6 голосов
/ 23 января 2013

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

<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 голосов
/ 24 июня 2011

Вот как я масштабирую imageтеги. Если вы хотите сделать его фоновым изображением, вы можете установить его абсолютное положение, поместить изображение в нужное вам место (используя объявления: top, bottom, left, right) и установить его 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 установлен на изображение, которое вы хотите иметь как ваш фон.

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

1 голос
/ 24 ноября 2014

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

<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>
1 голос
/ 31 марта 2014

С 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 голос
/ 24 сентября 2013

Просто добавьте! Важный тег ко всем элементам CSS в ответе Паоло! У меня отлично работает JQM + phonegap

Пример: 

body {
    background: url(../images/background.jpg) !important;
1 голос
/ 29 марта 2012

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

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

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

0 голосов
/ 07 декабря 2012

мой опыт:

в некоторых ситуациях 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" и "footera" являются идентификаторами содержимого и нижнего колонтитула соответственно.

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...