站长资源网页制作

自从我发表了 大背景网站 合集之后，我收到了很多邮件，询问怎样才能用 CSS 来定义网站中的大背景。于是我就想，分享下我在制作大背景网站中所应用到的技术或许是个不错的主意。在这篇教程中，我会提供多种 CSS 事例来讲解，如何使用一张或者两张图片来创建大背景网站。

常见的错误: 背景被裁减 (查看 演示)

看一下 演示 文件效果, 在 1280px 分辨率时显示的是正常的。但是在高于这个分辨率的显示器中，背景的两则看起来就像是被切短的了。

实例 1: 单张图片 (请看 范例)

迅速解决前面提到这一问题: 将图片边缘的颜色设置成跟 BODY 背景色相同的颜色。这里我以 Web Designer Wall 作为范例。请检查，下 图 中的边缘用的是纯色?

CSS 部分

CSS 部分非常简单。指定 BODY 标签的背景图像 (position 定位为 center, top) 。

这里是 CSS 代码:

body {
  padding: 0;
  margin: 0;
  background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top;

  width: 100%;
  display: table;
}