移动端html背景图片上下填充,CSS：移动端页面背景图固定（填充整个可视窗口），内容超出窗口部分可以滑动，但是背景还是有。...

之前一直直接给body设置背景图，存在以下问题：

1、当页面内容无法填充这个可视窗口时，背景图的高度跟随内容的高度显示；

为了解决这个问题，做了如下设置：

body{

width:100%;

height:100%;

position:fixed;

top:0;

left:0;

}

但是如此一来，就出现了问题2.

2、当页面内容的高度超出可视窗口时，超出部分不可见且屏幕无法往下滑。

如果用JS判断每个页面的内容高度再调整body的css，完全就是复杂繁琐至极。

百度了也没查到答案，在人家的原网页上发现这个方法(设置伪类)：

body：before{

content: ' ';

position: fixed;

z-index: -1;

top: 0;

right: 0;

bottom: 0;

left: 0;

background: url("../images/xzbg1.png");

background-size: 100% auto;

}

超级好用！！！一劳永逸~~~~

top/bottom只有一个值为必须的，left/right同理