左側に画像、右側にコンテンツを表示したいレイアウトを作成したいと思います。コンテンツがスクロールするとき、画像は一定のままである必要があります。
私が使用している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>
このサイトには多くの時間があり、background-attachment：fixedは、適用される要素ではなく、ビューポート全体に画像を配置することを理解しています。
私の質問は、そのようなレイアウトを作成するにはどうすればよいですか？
その画像を背景画像として表示したくありません。ウィンドウのサイズが変更された場合、ウィンドウが非表示になる可能性があるためです。ウィンドウサイズが900px（私のページ幅）未満の場合にスクロールバーを表示して、画像をいつでも表示できるようにしたい。
これはこのコードで発生しますが、代わりに画像を自分の要素から開始したいと思います。
どうすればこれを行うことができますか？
前もって感謝します ：）
編集：
私はアドバイスを受けて、position：fixedプロパティを＃main-imageに追加しました。上記のようにHTMLとCSSを使用します。さて、ヘッダーが動かないように修正したいと思います。基本的に、私のコンテンツセクションのみがスクロールする必要があります。ただし、ヘッダーにposition：fixedを追加すると、＃main-imageと#contentがヘッダーの上に配置されるようになります。＃main-imageにmargin-top：150px（ヘッダーの高さが150pxであるため）を追加すると、正常に機能し、適切に下に移動します。ただし、margin-top：150pxを#contentに追加すると、ヘッダーが150px下に移動し、＃contentの上に残ります。誰かがこれが起こっている理由を説明できますか？前もって感謝します ：）