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