改背景最怕改错图，然后手忙脚乱，搞得更糟糕。所以了解这一个背景篇之前，请先看过我的第一篇，那篇教大家分析整个template的图画layout构造。知道自己blog的构造后就可以开始改了。

大多数比较简单的template是没有背景的，都是以一个颜色作为背景。如下图就以#ccddbb为背景色。


首先，第一尝试，我们先尝试加入下面的背景图。

本来code里面是没有插入背景图的code的，我们就加入下面红色这个，
body {
background-color: #ccddbb;
background-image:url('背景图路径');
margin:0;
font: x-small Verdana, Sans-serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}
效果出来如下，还不错吧～


再来我们试试repeat-x的背景图，把下面这个图做背景，然后repeat-x让整个背景看起来好像一个黄昏那样。

就在多加那个repeat的code下去就可以了，如下。
body {
background-color: #ccddbb;
background-image:url('背景图路径');
background-repeat:repeat-x;
margin:0;
font: x-small Verdana, Sans-serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}
效果出来如下图这样，你也可以想想自己的idea repeat-x试试看。


做完repeat-x，我们来试试repeat-y，加入下图。

code也差不多的，就把x变成y而已。
body {
background-color: #ccddbb;
background-image:url('背景图路径');
background-repeat:repeat-y;
margin:0;
font: x-small Verdana, Sans-serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}
效果如下，左手边出现了落叶。


如果你是比较自恋的，想要把自己的大头照放在blog做背景，repeat-x或者repeat-y都会一直重复，不好看。如果这样的话，我们就把它load出来，不要repeat就可以了。如下面背景图。

code也不难，在repeat那边改成no-repeat就可以了。
body {
background-color: #ccddbb;
background-image:url('背景图路径');
background-repeat:no-repeat;
margin:0;
font: x-small Verdana, Sans-serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}
效果如下


背景那边还有一个特别功能，就是背景綁死功能。只要加入background-attachment:fixed;这个code，无论你的IE/Firefox scroll到哪里，他的背景都会綁死在后面不移动。
body {
background-color: #ccddbb;
background-image:url('背景图路径');
background-repeat:no-repeat;
background-attachment:fixed;
margin:0;
font: x-small Verdana, Sans-serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}
效果如下图，我的blog已经scroll到最下面，但是背景还是在左上角。

这个綁死功能，在repeat-x，repeat-y的时候都可以用到。但是，现在趋势不流行，而且会影响到读者阅读，不鼓励使用，除非你自恋到要人家看你的blog的时候要时常看着你的脸啦。

总结这一篇，背景有4个呈现方式，
普通背景，他自己会repeat-x和repeat-y
repeat-x，水平重复
repeat-y，垂直重复
单一背景，不重复

下一次，应该会解释什么是margin还有padding吧。

目录
http://gfishdiary.blogspot.com/2009/06/blogger-template.html