如何CSS大背景站点

翻译自：web designer wall

由于我发表了80 Large Background Websites，我就接到几份邮件来问我如何用CSS设计一个大背景的站点。所以，我想我应该开分享一下我设计大背景站点的技巧。于是我总结了一下几个技巧，运用一两张图片设计出大背景站点。

普遍的错误：被裁切的背景（Demo）

看一下示例文件，在1280px的分辨率下看起来是好的，但是如果转换到更高的分辨率下，你将看到类似于裁切边缘的效果。

 

示例#1：单图片（Demo）

一种简易的方法修补刚才的问题：让图片边缘的颜色和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;
}

 

注意有两行额外的代码。那是为了在改变浏览器大小浏览器宽度小于内容大小的时候防止背景移动（firefox中会出现这个bug）。

示例#2:两张图片式(Demo)

这是我用在job board板块设计里的——Design Jobs on the Wall。BODY用一张小的木质纹理图片重复，然后将大图片放在外包div wrapper的top center。

 

body {
	padding: 0;
	margin: 0;
	background: #d39c5c url(images/cork-bg.png);
	color: #333333;
}
#wrapper {
	background: url(images/corkboard-top-bg.png) no-repeat center top;
	width: 100%;
	display: table;
}
#content {
	width: 916px;
	margin: 159px auto 0;
	background: #fff;
	border: solid 1px #ccc;
	padding: 20px;
}
h1 {
	margin: 0;
	padding: 0;
}

 

技巧是将大背景图片的颜色设置为何背景小图片的颜色相似。

示例#3:天空背景（Demo）

我使用了1px宽的渐变图片水平重复在BODY的顶部，把大幅的天空背景放在#wrapper中间。

更新附加：运用HTML标签的天空背景（Demo）

谢谢读者们的留言，这是一个用HTML标签重复显示渐变图片的例子。这样的话#wrapper就可以省下了，这是更加清晰的方法。