jquery移动背景图像

我正在构建一个jQuery移动网站，我正在尝试将可缩放图像插入到背景中，这将调整到手机的屏幕大小。 这是我的代码：

        .ui-page { background: transparent url(image.gif); }    
 
 
Header tex
 
 
 some text 
 
 
Neki izbornik
 
 
 

当窗口全屏时，我得到背景图像，但是当我调整它/缩小它时（比如手机中的屏幕），图像没有resize并且没有居中，所以我只能看到它的一部分…

连接的jQuery和CSS文件从jquerymobile.com下载

Answer 1

对于jquery mobile和phonegap，这是正确的代码：

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

Answer 3

我认为你的答案将是background-size:cover 。

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

Answer 4

这是我如何缩放标签。 如果要将其设置为背景图像，可以将其设置为绝对位置，将图像放置在所需位置（使用：top，bottom，left，right声明），并将其z-index设置在页面的其余部分下方。

 //简单的例子
 .your_class_name {
    宽度：100％;
    高度：自动;
 }

 //背景图片示例
 .your_background_class_name {
    宽度：100％;
    高度：自动;
    顶部：0px;
    左：0px;
     z-index：-1;
    位置：绝对;
 }

要实现这一点，您只需将图像标记放在页面的data-role =“page”元素中，该元素具有“.your_background_class_name”类，并且src属性设置为您想要作为背景的图像。

我希望这有帮助。

Answer 5

试试这个。 这应该工作：

Answer 6

用这个简单地替换你的课程。

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

我有同样的问题，我解决了它。

Answer 7

只需在Paolo的答案中为所有css元素添加！重要标记！ 适合我的JQM + phonegap

例：

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

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

Answer 9

我发现这个答案对我有用

还要为内容部分的div添加id="background"

Answer 10

覆盖你的css中的ui-page类：

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

Answer 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”是整个页面的id，“contenta”和“footera”分别是内容和页脚的id-s。

这在PhoneGap + jQuery Mobile中肯定有效