title: Fixed div background
body: <p>I want to create a layout where I want to display an image to the left and content on the right. The image should stay constant when the content scrolls.</p>
  
  <p>The css I'm using:</p>
  
  <pre><code>    &lt;style type="text/css"&gt;
  
          #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;
  
          }
      &lt;/style&gt;
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div id="page-container"&gt;
      &lt;div id="header"&gt;&lt;img src="someimagelink" alt="" /&gt;&lt;/div&gt;
      &lt;div id="main-image"&gt;&lt;/div&gt;
      &lt;div id="content"&gt;&lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>Alot of time on this site and I have understood that background-attachment:fixed positions the image in the entire viewport and not the element it is applied to.</p>
  
  <p>My question is how do I go about creating that kind of layout?</p>
  
  <p>I do not want to give that image as a background image, as if the window is resized, it might get hidden. I want scrollbars to appear if the window size is less than 900px( my page width) so that the image can be viewed at all times.</p>
  
  <p>That happens with this code, however I would like the image to start at my element instead.</p>
  
  <p>How do I go about doing this??</p>
  
  <p>Thanks in Advance :)</p>
  
  <p>Edited:</p>
  
  <p>I took the advice and added a position:fixed property to #main-image. Using the HTML and CSS as shown above.
  Now, I also want to fix the header so that it does not move. Basically, only my content section should scroll.
  However, if I add a position:fixed to the header, my #main-image and #content now sit on top of my header.
  If I add a margin-top:150px (since my header height is 150px) to the #main-image, it works fine and moves down appropriately.
  However if I add a margin-top:150px to the #content, my header moves down by 150px and still sits on top of my #content.
  Can someone please explain why this is happening?
  Thanks in Advance :)</p>