背景平铺，顶部有灵活的背景图像（哦 - 和阴影）答案

【问题标题】：background tiled with flexible background image on top (oh - and a shadow)背景平铺，顶部有灵活的背景图像（哦 - 和阴影）
【发布时间】：2011-09-29 18:51:59
【问题描述】：

我的网站设计使用背景图像和纹理作为网站的特色。

在此处查看背景设计概念：http://www.flickr.com/photos/54233587@N03/6145240784/in/photostream

背景是这样工作的：

页面背景有平铺图案（或者在某些页面上会有纯色背景）。

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

所有其他页面内容位于背景顶部的居中 div 中，由屏幕截图中的黑框表示。

我试图通过将 HTML5 html 节点定位为平铺背景来实现这一点。

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

然后，对于叠加的背景图片，我一直在使用 div 元素插入图片。

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

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

谢谢。

【问题讨论】：

+1 表示标题的最后一部分。

标签： css background

【解决方案1】：

我会做这样的事情。

HTML：

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

CSS：

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

【讨论】：