jquery - 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;
}

（PS 我认为你的背景图片，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