1、首先准备一张设置为背景的图片，这边准备的是一张650px*347px的图片。
2、然后建立一个html文档，将它和背景图片放到一个文件夹中。
3、编辑html文档，这边建立一个div，设置宽度为700px，高度跟背景图一样，为347px。
4、就给div设置背景图片。
5、在浏览器中预览会发现图片平铺了，这不是想要的效果。
6、然后可以给div再加上属性，-moz-background-size:100% 100%background-size:100% 100%。
7、这样设置后就会发现背景图片拉伸至100%了。
问题原因：这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
通俗点说：
父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己父元素，祖先元素进行垂直外边距合并。只要给父元素（或祖先元素）设置个有效的 border或者padding就可以有效的管制子元素的margin防止它越级。
解决方法：
给父元素加个padding或border或overflow:hidden
background:url(images/loginbackground.png)top no-repeat 0px 10px
等同与
background:url(images/loginbackground.png)top no-repeat
background-position: 0px 10px//水平方向(以左上角为原点，x方向)移动 0像素，垂直方向（y轴方向）即向下以动 10 像素
***注意：0px 不能省略，否则默认为x方向移动的距离。也可以设置为百分比值。
修改后：
