jquery流动背景图象 [英] jquery mobile background image
本文介绍了jquery流动背景图象的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在建立一个jQuery移动网站，我试图插入一个可伸缩的图像到背景，这将调整到手机的屏幕尺寸。
这是我的代码：
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:
<!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...
已连接的jQuery和CSS文件是从jquerymobile.com下载的
Connected jQuery and CSS files are downloaded from jquerymobile.com
推荐答案
对于jquery mobile和phonegap，这是正确的代码：
For jquery mobile and phonegap this is the correct code:
<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>
这篇关于jquery流动背景图象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
