HTML/CSS繰り返し+画像ヘッダー

Question

私はヘッダーが動作していますが、非常に醜い方法で、誰かが私にこれを行う良い方法を教えてくれますか？

私は無限のヘッダーを持ち、中央にイメージがあります。だから私は、繰り返し背景画像を持って、次に私の画像を入れて、無限の画像を続ける必要があります。私はまた、画像の下に無限の線をしなければなりません。ここに私の作業が、醜いHTMLコードは次のとおりです。

<h1> 
    <div align="center"> 
     <img src="designs/header12.png" align="center"/> 
    </div> 
</h1> 

<br/><br/><br/><br/><br/><br/><br/><br/><br/> 

<h2></h2> 

私が正しい位置にH2を置くことができるように<br/>のシリーズを入れていました。 CSSでh1とh2がどのように見えるかは次のとおりです。

h1 { 
    background:url('../designs/headerPiece.png'); 
    height: 33px; 
    width:100%; 
    float:left; 
} 
h2 { 
    background:url('../designs/headerPiece.png'); 
    height: 33px; 
    width:100%; 
} 

何か助けてください！

Answer 1

を通常私は、H1の背景として、あなたはそれを書くことができ、かつ、よりSEOフレンドリーだ、このようにイメージを与えます。この場合は、背景のh1（幅と高さのプロパティ）に寸法を与える必要があります。

HTML：

<div id="page"> 
    <h1 id="header"> </h1> 
</div> 

CSS：

#page { 
    background: url('../designs/headerPiece.png') top left repeat-x; 
} 

#page h1 { 
background: url('designs/header12.png') top left no-repeat; 
margin: 0px auto; 
width: width-of-the-header; 
height: 33px; 
} 

Answer 2

これは動作するはずです：

<div class="background"></div> 
<h1><img src="designs/header12.png" align="center"></h1> 
<div class="background"></div> 

CSS：

.background { 
    background: transparent url('../designs/headerPiece.png') top left repeat-x; 
    height: 33px; 
    width: 100%; 
} 

h1 { 
    text-align: center; 
    margin: 0; 
    padding: 0; 
}