0

ヘッダーを設定する必要があります。私は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 上の画像

なぜそれが機能しないのか、誰にも分かりますか？

4

3 に答える 3

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
}
于 2012-11-22T17:30:55.810 に答える
0

このため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

于 2012-11-22T18:35:45.063 に答える
0

追加すると、背景画像を画像に適用できます

表示ブロック

CSS に追加しますが、代わりに画像をラップする div に ui-header クラスを適用することをお勧めします。

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 ずれている可能性があると思います)

于 2012-11-22T18:12:44.957 に答える