如何使用jquery mobile中心横幅？

Question

我正在构建一个jquery移动网站，我希望将我公司的横幅定位为stanford's移动网站，这在移动设备中看起来像这样：

此图像的尺寸为320x280，这意味着它非常适合宽度为320的手机屏幕（就像我在这种情况下使用的iphone）。在屏幕较大的其他手机中，它会留下左右间隙，看起来仍然很棒。

我尝试为我的网站复制此行为。然而，结果看起来很远。我使用了斯坦福网站上完全相同的图片，所以我确信没有尺寸问题。我的网站看起来像这样：

正如你所看到的那样，左侧和左侧存在间隙，我无法理解为什么会出现这种情况。

在stanfords移动网站上潜水一点，我找到了他们用于横幅的CSS：

/* Home page banner */
h2#banner {
    background:transparent url(../img/banner/banner.jpg) no-repeat left 10px;
    width:320px;
    height:284px;
    margin:-10px auto -150px auto;
    text-indent:-9999px;
}
/* Home page banner landscape */
.landscape h2#banner {
    background:transparent url(../img/banner/banner-landscape.jpg) no-repeat left 10px;
    width:480px;
    height:290px;
    margin:-10px auto -175px auto;
    text-indent:-9999px;
}
/* Remove reduntant extra top padding - don't put h2's in front of ul.listview */
h2 {
    margin:0;
    font-size:20px;
}

我使用完全相同的代码，但我仍有问题。

这里有什么想法，CSS以及我如何准确地将它集中在一起？

----

---

我还在一个屏幕较大的手机中尝试了我的网站。横幅以左右两侧的间隙为中心。尽管如此，左右应该只有间隙，而不是向上。

修改

---

在结合解决方案后，我最终得到了类似的东西：

h2#banner {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:transparent url(images/banner.png) no-repeat left 10px;
    width:320px;
    height:284px;
    margin:-10px auto -150px auto;
    text-indent:-9999px;
}

导致：

但是，我不能将图像移到上方，这样可以看到更多的横幅。使用之前的解决方案，我只需更改高度属性，更多空间被揭示/覆盖。我真的认为解决方案在stanfords网页内。我无法找到它导致我对此的理解，尚未成熟。但是CSS很小，应该很明显他们在做什么。我喜欢他们用图像覆盖标题的方式，并且图像与其他内容分开工作。

Answer 1

工作示例：http://jsfiddle.net/Gajotres/MgSP7/

HTML：

<div data-role="content">
    <h2 id="banner"></h2>
    <ul data-role="listview" data-theme="b" data-inset="true" id="custom-list">
        <li><a href="item1.html">item1</a></li>
        <li><a href="item1.html">item1</a></li>
        <li><a href="item1.html">item1</a></li>
    </ul>                
</div>

CSS：

#banner {
    position: absolute;
    top:43px;
    bottom: 0;
    left:0;
    right:0;
    padding: 0 !important;
    background:transparent url('http://m.stanford.edu/img/banner/banner.jpg') no-repeat center top !important;
}

#custom-list {
    margin-top: 150px;    
}

Answer 2

您可以使用任何图像尺寸。

请参阅背景图片大小为1600x1200像素的DEMO http://jsfiddle.net/yeyene/DHUup/2/。

提示：覆盖图像底部的渐变色以匹配背景色。

HTML

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

    <!--<div data-role="header">
        <h1>Stanford</h1>
    </div> /header -->

    <div data-role="content" style="margin-top:200px;">
        <ul data-role="listview" data-inset="true">
            <li><a href="#">Acura</a></li>
            <li><a href="#">Audi</a></li>
            <li><a href="#">BMW</a></li>
            <li><a href="#">Cadillac</a></li>
            <li><a href="#">Ferrari</a></li>
        </ul>
    <div><!-- /content -->

</div><!-- /page -->

这个CSS将为你完成所有这一切，包括potrait和amp;景观。

#myBanner{
    float:left;
    width:100%;
    background:url(http://www.hdwallpapers.in/walls/the_glorious_church_at_stanford-normal.jpg);
    background-size:100% auto;
    background-repeat:no-repeat;
}