Fixed div background

Question

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.

The css I'm using:

    <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>

The HTML:

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

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.

My question is how do I go about creating that kind of layout?

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.

That happens with this code, however I would like the image to start at my element instead.

How do I go about doing this??

Thanks in Advance :)

Edited:

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 :)

Answer 1

Take a look at this link:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

You can learn how to position Div's with it.

This will solve your problem: #main-image {position:fixed;}

---

EDIT: I'm not sure of what caused your problem but here is the solution: #content{ position:relative; top:150px; }

My Guess: I think that happened because when using position:fixed those 2 div's were positioned relative to the the browser window, while the other one was relative to the document itself.

In this link you will see more about positioning and you can test some of these features related to the position property:

http://www.w3schools.com/cssref/pr_class_position.asp

About the fact that one div was positioned over another, you should search for the 'z-index' property. Firefox has a 3D mode so you can see this more clearly:

http://www.addictivetips.com/internet-tips/browse-internet-in-3d-using-mozilla-firefox-11-tip/