divでコンテンツを展開するにはどうすればよいですか？

Question

私はこれらの性質を持つdiv要素

#content { 
background-image: url('img/cbg.png'); 
background-position: center top; 
background-repeat: repeat-y; 
width: 960px; 
margin: auto; 
padding-bottom:50px; 
margin-bottom: 20px; 
} 

背景のみ（と思う）70ピクセルのために現れた後、停止し、その後、divの内側のものの残りの部分は普通のようにページの下に行くを持っています。 display：inline-blockを設定すると、正しく動作しますが、私のdivはアンセンタリングされます。

Answer 1

浮動小数点型のコンテナに要素がある場合、浮動小数点数が適切にクリアされていない可能性があります。これがあなたの問題ならば、 "clearfixs"と呼ばれる一連の回避策があります。

One of my favorite write-ups was here。この例で使用したCSSはここにありました。

div.container { 
    border: 1px solid #000000; 
    overflow: hidden; 
    width: 100%; 
} 

div.left { 
    width: 45%; 
    float: left; 
} 

div.right { 
    width: 45%; 
    float: right; 
} 

Answer 2

さて、あなたはrepeat-yをやっています。つまり、それは垂直にしか繰り返されません。背景画像が70ピクセルの場合、それは問題をサポートします。 repeat-xまたはちょうどrepeatを使用してください。

Answer 3

、あなたのブラウザウィンドウで960ピクセル幅にご#content幅を設定しているので、それはもはや拡大しないでしょう。

画像が70pxまでしか拡大していない場合は、使用した画像の実際のheightである可能性があります。誤ってrepeat-y（垂直方向に繰り返す）を使用しました。あなたは、垂直方向に画像を繰り返して水平に広い画像を作成する場合

1. ：ここ

   はbackground-repeatでシンプルなコンセプトです。

2. 画像を水平方向に繰り返したい場合は、垂直方向に高い画像を作成します。