HTMLとCSSを使用して本文にオーバーフローしますか？

私のdivの1つの背景イメージをボディセクションにあふれさせたい。私はオーバーフローを試みました。運がなくても見えます。HTMLとCSSを使用して本文にオーバーフローしますか？

写真をチェック：

wish it would overflow

は金のビットはdiv要素の端に切り取ら取得する方法を参照してください？提案してください？ HTMLで

：CSSで

<body> 
<div id="container">

：

body{ 
    background-color: #0e0a04; 
} 

#container{ 
     max-width: 960px; 
    margin: 0px auto; 
    padding: 0px; 
    margin-top:60px; 
    background-color: #0e0a04; 
    background-image: url(/bundles/tabredirector/images/background-image.png); 
    background-repeat:no-repeat; 
    background-position: -70px -20px; /*x,y*/ 
    overflow:visible; 
}

おかげ

は、ここに私のセットアップです！私が実装してしまっWHAT

：ご提案のすべてのための

おかげで、彼らは私の解決策に影響を与えました。私の最終的な解決策は、マスタdiv（位置：z-index：-1の相対位置）とコンテナ（position：絶対z-index：1）を使用し、絶対配置できるマスタdivに画像を貼り付けることでした。この方法では、コンテンツは常に上に表示され、背景はクリップされません。

出典

2012-02-17 Adam Waite

コードは、plsは...私たちは、動作しません、バックグラウンドを使用して、あなたの構造 – ggzone

を知りません。 'img'を使うことはできませんか？ –

質問に追加されたコード、申し訳ありません –

最初にあなたのマークアップとCSSを投稿してください。またdivに幅：100％を与えます。

出典

2012-02-17 11:17:39 Abhidev

質問に追加されたコード、申し訳ありません –

私はdivが960pxになる必要があります –

あなたが含まれているdivの外にdivがあることを確認する必要があります。他のすべてのコンテンツを保持するコンテナを上下に持つことができます。

次に、完全なbg画像を中央にして100％の幅のdivが必要です。

コンテンツの別のdivを追加します。幅は960で、ページの中央に自動左右の余白があります。

あなたのHTMLにあなたのHTMLを貼り付けるだけでなく、あなたのhtmlに追加する必要があるのでCSSが十分ではありません！

ありがとうございました

出典

2012-02-17 11:44:13

要素の背景画像は、その要素内にのみ表示されます。

<div>の背景イメージを<div>の境界線の外に表示するには、代わりに別の要素に背景イメージを割り当てる必要があります。 <body>要素。相続人は簡単な例

出典

2012-02-17 11:56:29

は：背景には、コンテンツのようなオーバーフローはなりませんので

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
.container { 
    padding: 0px; 
    width: 960px; 
    margin-top: 0px; 
    margin-right: auto; 
    margin-bottom: 0px; 
    margin-left: auto; 
} 
#fullWidthImage { 
    background-color: #0F9; 
    height: 200px; 
    width: 100%; 
} 
#centeredContent { 
    padding: 0px; 
    width: 960px; 
    margin-top: 0px; 
    margin-right: auto; 
    margin-bottom: 0px; 
    margin-left: auto; 
    height: 200px; 
    background-color: #09C; 
} 
</style> 
</head> 

<body> 

<div class="container"> 
    <p>&nbsp;</p> 
    <p>top site content </p> 
    <p>&nbsp;</p> 
</div><!--container--> 

<div id="fullWidthImage"> 
<div id="centeredContent"> 
content bla bla 
</div> 
</div><!--fullwidthImage--> 

<div class="container"> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>bottom of site content </p> 
</div> 
<!--container--> 
</body> 
</html>

出典

2012-02-17 12:08:53

HTMLとCSSを使用して本文にオーバーフローしますか？

答えて

関連する問題