html的div背景,HTML – 修正了div背景

我想创建一个布局,我想在左边显示图像,在右边显示内容.当内容滚动时,图像应保持不变.

我正在使用的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;

}

HTML：

很多时间在这个网站上,我已经理解了背景附件：固定图像在整个视口中的位置,而不是它应用的元素.

我的问题是如何创建这种布局？

我不想将该图像作为背景图像,就像窗口调整大小一样,它可能会被隐藏.如果窗口大小小于900px(我的页面宽度),我想要滚动条出现,以便可以随时查看图像.

这个代码会发生这种情况,但我希望图像从我的元素开始.

我该怎么做呢？

提前致谢 ：)

编辑：

我接受了建议并添加了一个位置：固定属性为#main-image.使用如上所示的HTML和CSS.

现在,我还想修复标题,使其不移动.基本上,只有我的内容部分应该滚动.

但是,如果我添加一个位置：固定到标题,我的#main-image和#content现在位于我的标题之上.

如果我向#main-image添加一个margin-top：150px(因为我的标题高度是150px),它可以正常工作并适当地向下移动.

但是如果我在#content中添加一个margin-top：150px,我的标题会向下移动150px并且仍然位于我的#content之上.

有人可以解释为什么会这样吗？

提前致谢 ：)