废话不多说，先看这里看演示

我们先来看看HTML主体代码

再来看看CSS的代码。点这里下载本教程所用到的图片。

body { text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:small; } #outer { width:80%; margin:0px auto 0px auto; padding:0px; background-attachment: scroll; background-image: url(images/background_r3_c5.gif); background-repeat: repeat-y; background-position: right 0px; background-color: #B5DE54; } #wrapper { width:100%; margin:0px; padding:0px; background-attachment: scroll; background-image: url(images/background_r3_c2.gif); background-repeat: repeat-y; background-position: 0px 0px; } #header, #header_left, #header_right, #footer_left, #footer_right { margin:0px; padding:0px; } #header { position:relative; height:70px; background-image: url(images/background_r2_c3.gif); background-attachment: scroll; background-repeat: repeat-x; background-position: left 0px; } #header_left { position:absolute; top:0px; left:0px; width:30px; height:70px; background-attachment: scroll; background-image: url(images/background_r2_c2.gif); background-repeat: no-repeat; background-position: left 0px; } #header_right { position:absolute; top:0px; right:0px; width:30px; height:70px; background-attachment: scroll; background-image: url(images/background_r2_c5.gif); background-repeat: no-repeat; background-position: right 0px; } #container { margin:0px; padding:10%; width:80%; height:auto; } #footer { margin:0px; padding:0px; height:40px; position:relative; background-attachment: scroll; background-image: url(images/background_r5_c3.gif); background-repeat: repeat-x; background-position: left bottom; } #footer_left { position:absolute; bottom:0px; left:0px; width:30px; height:40px; background-image: url(images/background_r5_c2.gif); background-attachment: scroll; background-repeat: no-repeat; background-position: left bottom; } #footer_right { position:absolute; bottom:0px; right:0px; width:30px; height:40px; background-attachment: scroll; background-image: url(images/background_r5_c5.gif); background-repeat: no-repeat; background-position: right bottom; }