做好了可以进行填充的图片，就可以用 css 来控制了。
示例：
background:url(images/01.jpg) repeat-x 0 0
说明：
images/01.jpg 是图片的相对路径
repeat-x 横向平铺 与之相对的还有 repeat-y(纵向平铺)no-repeat(不平铺)
0 0 定义图片的起始位置（第1个左右位置，第2个是上下位置）
repeat-x是指背景图片横向铺满，简单点说，bg.gif会横向重复，一直到铺满容器，如下图：
你可以使用no-repeat让背景图片不重复。
希望可以帮到你
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<div style="width:100% height:30px">
<div id="left" style="width:30px height:30px float:left background:#f00"></div>
<div id="right" style="width:30px height:30px float:right background:#00f"></div>
<div id="center">
<div class="mian" style="margin:0 40px 0 40px height:30pxbackground:#ff0"></div>
</div>
</div>
</body>
</html>
这是典型的三栏式布局，左右两栏定宽，中间随页面宽度自动适应。
当块标签没有设定width float 的时候宽度是随屏幕100% 变化的。
所以中间列不用设置width 而他的子级 main 设置左右边距是解决与左右列重合的问题~
