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">
    html, body
    {
        margin:0;
        padding:0;
    }
    #page-container
    {
        margin:auto;
        width:900px;
        background-color:Black;
        background-image:url('images/desired_layout.png');
        background-attachment: fixed;
        background-repeat:no-repeat;
    }    

    #main-image
    {
        float:left;
        width:250px;
        height:687px;
        background-image:url('images/desired_layout.png');
        background-attachment:fixed;
        background-repeat:no-repeat;
    }

    #content
    {
        margin-left:250px;
        background-color:Olive;
        height:800px;
        width:650px;
    }
</style>

The HTML:

<div id="page-container">
    <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 :)