jQuery Mobile Header - 如何重复-x a bg并放置图像？

Question

我需要设置标题。我正试图repeat-x一个背景并放一张图片而没有运气。

HTML：

<div data-role="page" id="page1">
<div data-role="header">
    <div><img src="jquery-mobile/images/logo.png" class="ui-header"></div>
</div>

CSS：

    .ui-header{
    background-image: url(http://www.mybizonline.co.il/book/tno/jquery-mobile/images/bg.jpg);
    background-repeat: repeat-x; 
    width: 1024px;
    height: 275px;
}

它看起来像这样：

bg重复到x，bg上的图像

有谁知道为什么它不起作用？

Answer 1

HTML：

<div data-role="page" id="page1">
<div id="bg_wrapper" data-role="header">
    <img src="jquery-mobile/images/logo.png" class="ui-header">
</div>

的CSS：

#bg_wrapper {
    background: url('...') repeat-x;
    text-align: center;  // To center your img
}    

Answer 2

如果添加

，您可以将背景图像应用于img

显示：阻止

到CSS，但我建议将ui-header类应用于包裹图像的div：

http://jsfiddle.net/8mv7V/

<div data-role="page" id="page1">
<div data-role="header">
<div class="ui-header"><img src="http://www.mybizonline.co.il/book/tno/jquery-mobile/images/logo.png"></div>
</div>

CSS：

.ui-header
{
background-image: url(http://www.mybizonline.co.il/book/tno/jquery-mobile/images/bg.jpg);
background-repeat: repeat-x;
height: 462px;
text-align: center;
}

（P.S。我认为你的背景图片，bg.jpg，顶部可能是8px）

Answer 3

对于这个you have to do some work on image resizing，我已经做了你想要做的事情：

.ui-header{
   background: url(http://www.mybizonline.co.il/book/tno/jquery-mobile/images/bg.jpg) 0 -60px repeat-x; 
   width:500px;
   height: 275px;
   padding:0 254px;
   text-align:center;
}

you can find out here: http://jsbin.com/aduxum/5/edit