背景画像ストレッチと作物

Question

は、これまでのところ私はストレッチする背景画像を取得するために管理している：

XHTML：

<div id="background"> 
    <img src="images/background.jpg" alt="Background" /> 
</div> 

CSS：これは画像を除いて、うまく機能

#background 
{ 
    width: 100%; 
    height: auto; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
} 

#background img 
{ 
    width: 100%; 
    height: 100%; 
} 

画像の高さがウィンドウの高さを超えると、上から表示されています。つまり、画像の上部は常に表示されますが、下部は切り取られています。私はこれを変更して、画像が常に中央から表示されるようにします（画像の上と下の両方がカットされ、画像の中央が表示されるようにします）。

Answer 1

Here is a good tutorial on creating a perfect full page background image。同じ概念を任意のol divにも適用できます。

一般に、背景画像であることを意図した画像は、マークアップ自体に表示されるべきではありません。あなたはコンテンツとプレゼンテーションをミックスしています。

Answer 2

imgタグを持つことは絶対に必要でない場合は

、それを削除し、あなたの#backgroundクラスに以下の3行を追加します

background-image:url(images/background.jpg); 
background-position:center; 
background-repeat:no-repeat; 

最初の行はDIVのためにあなたの背景を設定します。 2番目の行は、常に中央に配置します。 3行目は背景が繰り返されていないことを確認しています。これはあなたのHTML構造を見て必要と思われるものです。

さらにお勧めします。