CSS：固定幅、中央揃えのdivの背景に画像を表示するにはどうすればいいですか？

Question

は、私はそうのような内容が固定幅の中に座っているWebページ、中心のdivを、書いた：私はdiv要素内の背景画像を置くように頼まれたまで

<div style='width:800px; margin: -5px auto 0px auto;' >  
This is a fixed-width centered div! 
</div> 

すべてが大丈夫でした。 CSSの背景を使用すると、画像が伸びたり、タイルされたりすることが避けられません。私はそれを望んでいない。 イメージのインスタンスは、固定幅divの左上隅に左上隅があります。

私はこれをいくつかの方法で試みました。ここで

は動作しません最初の方法です：

<img src='images/background.jpg' alt='background' 
style='position:relative;left:0;top:0;z-index:-1' /> 

この例では、画像は私が望むとおりに位置付けますが、div要素のテキストは、画像の下に表示されています。

はここで働いていない第二の方法です：私が望むよう

<img src='images/background.jpg' alt='background' 
style='position:absolute;left:0;top:0;z-index:-1' /> 

絶対位置を使用して、テキストが画像の上に表示されます。ただし、画像はページの左上隅に表示されます。これは、絶対位置付けを伴う他の要素がないために予想される。私は解決策は、固定幅の中心divの位置を絶対に設定することであることを理解しています。しかし、私がこれを行うと、固定幅のdivはもはや中央に配置されなくなりました。

私のdivはもはや中央になりません！

HTMLとCSSを記述して、固定幅の中央揃えのdiv内にテキストがあり、テキストの背後に背景イメージが表示されるようにするにはどうすればよいですか？

Answer 1

CSSバックグラウンドを使用すると、画像が伸びて またはタイルになることが避けられません。

はい、background-imagesは、デフォルトでで繰り返されます（）。しかし、あなたが明示的が

<div style='width:800px; margin: -5px auto 0px auto;background-image:url('images/background.jpg');background-repeat:no-repeat;' >  
This is a fixed-width centered div! 
</div> 

no-repeatにbackground-repeatを設定することができ、[編集]垂直クリッピングは、あなたのdivのmin-height画像のピクセル高さを設定することにより解決することができます。これにより、あなたのdivが常に、少なくとも、画像と同じになることが保証されます。これは理想的なソリューションです。

あなたのイメージがあなたのdivの800ピクセル静幅より考え広くなっている場合は、あなたがDIV position:relativeや画像position:absoluteと左画像のトップ/を作る...バックネストされた画像溶液に行く必要がありますページではなくdivに相対的になります。次のとおり

background: <background-color> url(<background-image>) <background-position-x> <background-position-y> <background-repeat>; 

：画像上z-index-1と組み合わせることで、あなたはあなたが速記でbackgroundプロパティを設定することができます（fiddle demonstrating an un-clipped image）

Answer 2

を行くために良いことがあります

<div style='position:fixed; width:800px; margin: -5px auto 0px auto; border: 2px solid #ccc; height: 5em; background: rgba(255,255,255,0.5) url(http://davidrhysthomas.co.uk/img/dexter.png) 0 0 no-repeat;'>  
This is a fixed-width centered div! 
</div> 

JS Fiddle demo。

参考：

• CSS background at the MDC。

Answer 3

"overflow：visible;"を使用できます。画像が切り取られないようにします。

<div style='width:800px; overflow: visible; margin: -5px auto 0px auto;background-image:url('images/background.jpg');background-repeat:no-repeat;' >  
This is a fixed-width centered div! 
</div> 

または、divの「最小高さ」を画像の高さと同じにしてみてください。下の例では300ピクセルを使用しましたが、イメージをどのサイズに変更する必要があります。

<div style='width:800px; min-height: 300px; margin: -5px auto 0px auto;background-image:url('images/background.jpg');background-repeat:no-repeat;' >  
This is a fixed-width centered div! 
</div>