原文地址：From PSD to HTML, Building a Set of Website Designs Step by Step
翻译整理：西米CC
1.3 – 背景图片制作
至1.2为止，虽然长相比较困难，但至少页面的骨架是出来了。现在主要的元素已经定位好了，接下来我们先利用CSS进行一些初步的外观修饰，有了精美的图片素材，这项工作是相当简单的事情，你可以从素材压缩包里获取相应的图片。
我们要使用的第一张图片是相当巨的一张背景图，在上面我应用了简单的放射高光效果。在网页中设置背景的时候，我会在这张大图的两边平铺一张单像素切片，以实现背景区域扩展：
同样的我们也要为页脚设置一张背景图片，这张背景的顶部有一条边框分割线，以便浏览者更好的区分#main和#footer两块区域。页脚背景图片可以在素材压缩包里找到，我把它命名为background_footer。现在我们来改动之前的CSS样式，去掉原来的红色边框，并添加上刚刚所说的背景图像（CSS中背景图片的路径请根据具体情况修改——译者西米CC注）：
@charset "UTF-8";
/* Background-Styles */
body {
margin:0px; padding:0px;
background-color:#131211;
}
#main {
background:#c4c0be url(images/background_light_slice.jpg) repeat-x;
}
#main .container {
background-image:url(images/background_light.jpg);
background-repeat:no-repeat;
min-height:400px;
}
#footer {
background-image:url(images/background_footer.jpg);
background-repeat:repeat-x;
color:white;
padding:40px;
}
.container {
width:950px;
margin:0 auto;
position:relative;
}
两个注意点：
1.设置背景图片有多种方式，在#main中我把背景的颜色、图片及其平铺方式用一条语句来定义，而在#main .container 和 #footer中则对每个属性使用了单独的语句。至于哪一种更好，废话啦…
2.因为我要将background_light.jpg设置为#main中 div class='container' 的背景，所以书写选择符的时候使用了#main .container，这样#footer中的 div class='container' 就不会有背景相同的图像了，这就是所谓的包含选择符。
1.4 – 在浏览器中测试
别忘了在不同的主流浏览器中测试至今为止的页面效果，还算比较理想，下面就是IE7中的测试效果：
