html背景图片手机端全屏,css 背景图全屏显示，兼容移动端

.login {

background: url(img/login.jpg) no-repeat center center;

background-size: cover;

background-attachment: fixed;//当页面的其余部分滚动时，背景图像不会移动。

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

}

问题一：


因为background-attachment:fixed属性在移动端不兼容，就出现了在手机端显示的时候背景图不展开的情况。

问题二：

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

有定位的时候，在PC端当列表内容超过屏幕高度时，列表无法下拉。

整体来说，上面的写法对PC端、移动端都不是很友好。

所以我搜了一个更好的写法，在背景前添加了一个伪类，即兼容性移动端，也没有列表无法滚动的问题。

.login:before {

content: "";

background: url(img/login.jpg) no-repeat center center;

background-size: cover;

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

}