我无法使用 JQuery 移动设备让我的背景填满整个屏幕

Question

我只能得到header下的banner类型的图片。它不适合屏幕的宽度和高度，这正是我想要的，所以不同的 phone 尺寸会进行调整。我研究了很多，但我无法得到它。这是我得到的图像。我希望图片填满整个页面，介于 header 和页脚之间，并且我希望它根据屏幕大小进行调整。

现在遇到这个问题。背景也在所有 m 页上，我只想在家里。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<style type="text/css">

 #background {
background: url(landscape.jpg);
background-repeat:repeat-y;
background-position:center center;
background-size:100% 100%;
}


.ui-page {
background: transparent;
}
.ui-content{
background: transparent;
}

</style>
</head>
<body>


<div data-role="page" id="Home" >

    <div data-role="header" data-position="fixed" >
        <h1>Header</h1>
        <a href="#bars" data-role="button" data-icon="bars" data-    iconpos="notext" data-theme="a" data-inline="true">Bars</a>
    </div><!-- /header -->

<div data-role="content" id="background">
    <p>Home.</p>
</div><!-- /content -->

<div data-role="footer" data-position="fixed">
    <h4>Page Footer</h4>
</div><!-- /footer -->

Answer 1

尝试

background-size:cover;

或者您可以 link 解决您的问题？

Answer 2

我建议您使用 .ui-content class 以便 add/edit 内容的样式。

尝试使用这个 CSS:

.ui-content {
background: transparent url(http://miriadna.com/desctopwalls/images/max/Ideal-landscape.jpg);
background-size :cover; // or you can leave as 100% 100%
color:#FFFFFF;
text-shadow:1px 1px 1px #000000;
}

.ui-page {
background: transparent;
}

以及以下 JS/Jquery：

$(document).delegate('#Home', 'pageshow', function () {
var the_height = ($(window).height() - $(this).find('[data-role="header"]').height() - $(this).find('[data-role="footer"]').height());
$(this).height($(window).height()).find('[data-role="content"]').height(the_height);
});

更新

JSFIDDLE

我无法使用 JQuery 移动设备让我的背景填满整个屏幕

I can't get my background to fill the entire screen using JQuery Mobile

html

css

mobile

jquery