jQuery jquery手机背景图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6467806/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery mobile background image
提问by tokmak
I am building a jQuery mobile site, and I am trying to insert a scalable image into the background, which would adjust to screen size of the phone. This is my code:
我正在构建一个 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 -->
When the window is in fullscreen, I get background image, but when I resize it/make it smaller (like the screen in phones), the image isn't resized and it is not centered, so I can only see one part of it...
当窗口全屏时，我得到背景图像，但是当我调整它的大小/使它变小（就像手机中的屏幕一样）时，图像没有调整大小并且没有居中，所以我只能看到它的一部分...
Connected jQuery and CSS files are downloaded from jquerymobile.com
从 jquerymobile.com 下载连接的 jQuery 和 CSS 文件
回答by Paolo
For jquery mobile and phonegap this is the correct code:
对于 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>
回答by raf
None of the above worked for me using JQM 1.2.0
以上都不适合我使用 JQM 1.2.0
This did work for me:
这对我有用：
.ui-page.ui-body-c {
background: url(bg.png);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
}
回答by ofer ziv
I think your answer will be background-size:cover.
我想你的答案会是background-size:cover。
.ui-page
{
background: #000;
background-image:url(image.gif);
background-size:cover;
}
回答by Lars
Try this. This should work:
尝试这个。这应该有效：
<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">
回答by Jasper
Here is how I scale <img> tags. If you want to make it a background image you can set it's position to absolute, place the image where you want (using the: top, bottom, left, right declarations), and set it's z-index below the rest of your page.
这是我缩放 <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;
}
To implement this you would simply place an image tag inside the data-role="page" element of your page(s) that has the ".your_background_class_name" class and the src attribute set to the image you want to have as your background.
要实现这一点，您只需在页面的 data-role="page" 元素中放置一个图像标签，该元素具有“.your_background_class_name”类和 src 属性设置为您想要作为背景的图像。
I hope this helps.
我希望这有帮助。
回答by Mihir
just simple replace your class with this.
只是简单地用这个替换你的类。
.ui-page
{
background: transparent url(images/EarthIcon.jpg) no-repeat center center;
}
I have same issue and i solved it.
我有同样的问题，我解决了。
回答by 426 - Your digital upgrade
Just add !important tag to all css elements in Paolo's answer! Works fine for me JQM+phonegap
只需将 !important 标签添加到 Paolo 答案中的所有 css 元素即可！对我来说很好用 JQM+phonegap
EXAMPLE:
例子：
body {
background: url(../images/background.jpg) !important;
回答by metamagikum
With JQM 1.4.2 this one works for me (Change theme to the used one):
使用 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;
}
回答by FLICKER
I found this answer works for me
我发现这个答案对我有用
<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>
also add id="background"to the div for your content section
还id="background"为您的内容部分添加到 div
<div data-role="page" data-theme="a">
<div data-role="main" class="ui-content" id="background">
</div>
</div>
回答by FLICKER
Override ui-page class in your css:
在你的 css 中覆盖 ui-page 类：
.ui-page {
background: url("image.gif");
background-repeat: repeat;
}
