固定小数点の背景

画像を左側に、右側のコンテンツを表示するレイアウトを作成したいと思います。コンテンツがスクロールすると、画像は一定のままになります。固定小数点の背景

私が使用しているCSS：

<style type="text/css"> 

     #page-container 
     { 
      margin:auto;    
      width:900px;    
      background-color:Black; 
     } 

     #header 
     { 
      height:150px; 
      width:650px; 
     } 

     #main-image 
     { 
      float:left; 
      width:250px; 
      height:500px; 
      background-image:url('../images/main-image.png'); 
      position:fixed; 
     } 


     #content 
     { 
      margin-left:250px; 
      padding:10px; 
      height:250px; 
      width:630px; 
      background-color:Teal; 

     } 
    </style>

HTML：

<div id="page-container"> 
    <div id="header"><img src="someimagelink" alt="" /></div> 
    <div id="main-image"></div> 
    <div id="content"></div>  
</div>

このサイト上の時間の多くと私はその背景 - 添付ファイルを理解している：固定位置ビューポート全体のイメージであり、適用される要素ではありません。

私の質問は、そのような種類のレイアウトを作成するにはどうすればいいですか？

私はそのイメージをバックグラウンドイメージとして与えたくありません。ウィンドウのサイズが変更されたように、隠されるかもしれません。ウィンドウサイズが900px（私のページ幅）未満の場合はスクロールバーを表示して、画像を常時表示できるようにします。

このコードではこのようなことが起こりますが、代わりにイメージを要素から開始したいと考えています。

これを行うにはどうすればいいですか？事前に

感謝:)編集

：

私がアドバイスを取って、ポジションを追加しました：＃メインイメージに固定プロパティを。上記のようにHTMLとCSSを使用する。これで、ヘッダーが動かないように修正したいと思います。基本的には、私のコンテンツセクションだけがスクロールする必要があります。しかし、ヘッダに位置を固定して追加すると、私のメイン画像と#contentが現在私のヘッダの上に表示されます。＃main-imageにmargin-top：150px（ヘッダの高さが150pxであるため）を追加すると、正常に動作し、適切に下に移動します。＃margin-top：150pxを#contentに追加すると、ヘッダーが150px下がり、まだ#contentの上に位置しています。誰かがなぜこれが起こっているのか説明できますか？ありがとうございます。

出典

2012-10-15 Fahad

あなたは新しい質問として、あなたの編集を再投稿することができます。 –