你需要用到background-position这个属性，用以规定背景图片的位置。让图片居中偏下的代码为：
background-positon:center bottom 或 background-positon:bottom全部的位置代码如下：
background-position: left 代表背景图横向（X轴）靠左，纵向（Y轴）居中。（9点钟位置）
background-position: right 代表背景图横向（X轴）靠右，纵向（Y轴）居中。（3点钟位置）
background-position: top 代表背景图横向（X轴）居中，纵向（Y轴）靠上。（12点钟位置）
background-position: bottom 代表背景图横向（X轴）居中，纵向（Y轴）靠下。（6点钟位置）
background-position: center 代表背景图横向（X轴）居中，纵向（Y轴）居中。（绝对居中）
background-position: left top 代表背景图横向（X轴）靠左，纵向（Y轴）靠上。（10点钟位置）
background-position: left bottom 代表背景图横向（X轴）靠左，纵向（Y轴）靠下。（7点钟位置）
background-position: right top 代表背景图横向（X轴）靠右，纵向（Y轴）靠上。（1点钟位置）
background-position: right bottom 代表背景图横向（X轴）靠右，纵向（Y轴）靠下。（5点钟位置）
？我奇怪了，div为块级元素，middle一定在foot的上方。你可以在middle内填写内容,height:100%
宽度不用设定，内容自然会随middle宽度变化而变化。
还有z-index:0这个需要设定吗？
定位要改下relative，是相对于原本(自身,标准流时的位置为基准)的，而且移动后，原本的又暂位置。这里要改为margin-top.
clear:both这个是消除float用的。用在这里干什么？
去掉relative,z-index.上中下盒子如果没有设置固定高宽，浮动或定位，自然会随浏览器的变化而变化。
有什么问题可以继续问。
