Css 背景平铺，顶部有灵活的背景图像（oh-和阴影）

我有一个网站设计，使用背景图像和纹理作为网站的一个功能

请参见此处的背景设计概念：

背景的工作原理如下：

页面背景采用平铺图案（或在某些页面上采用纯色背景）

背景的顶部与背景图像重叠。背景图像是一个大图像（2000px宽），需要在窗口中居中。根据页面的不同，图像的高度将从底部裁剪（即，在一个页面上，图像可能需要400px，而在其他页面上，图像可能需要450px）。此背景图像还应用了CSS3框阴影，因此在图像底部有轻微阴影。此背景图像不能使用固定位置-也就是说，如果滚动，它应随页面移动

所有其他页面内容都位于背景上方，中间有一个div，由屏幕截图中的黑框指示

我试图通过将HTML5HTML节点作为平铺背景来实现这一点

html {
    background: url(../img/pegboard.jpg) repeat center;
}

然后，对于叠加的背景图像，我使用了一个div元素来插入图像

<div id="bgimage"><img src="mybgimage.jpb"></div>

然后将img设置为尝试居中，滚动时不固定，并调整div大小以从底部裁剪图像。都没有多大成功

---

谢谢。

我会这样做的

HTML:

---

我会这样做

HTML:

---

+标题最后一部分为1，标题最后一部分为+1。

<div id="bgimage"></div>
<div id="content">
   Actual content goes here.
</div>

body {
    background: url(../img/pegboard.jpg) repeat center;
}
#bgimage {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: url(../img/mybgimage.jpg) no-repeat center;
    height: 400px;
    box-shadow: 0 5px 5px -5px #000;
}
#content{
    margin: 0 auto;
    width: 960px;
    height: 1000px;
    background: #000;
    filter: alpha(opacity=50);
    opacity: 0.5;
}