完整的背景图像未在移动设备上显示

Question

完整的背景图像在移动设备上未正确显示。我如何显示完整的背景图像？

body {
background-color: #000; 
background-image: url(http://godwellontheloose.com/IMG_0463bwssww.jpg); 
background-repeat: no-repeat; 
background-position: center;
background-attachment: fixed;       
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; 
}   
a {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

Answer 1

首先将HTML和身体定义为100％高度和宽度。

html,body{width:100%; height:100%;}

添加了此元素，设置为100％高度的任何元素都将在100％的高度显示。工作示例如下，运行代码并单击全屏。

html,body{width:100%; height:100%;}
body{margin:0px; padding:0px;}
.background{background-image:url('https://media-cdn.tripadvisor.com/media/photo-s/0e/85/48/e6/seven-mile-beach-grand.jpg');width:100%; height:100%;
background-color: #000; 
background-repeat: no-repeat; 
background-position: center;
background-attachment: fixed;       
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; 
}

<div class="background"><a href="#test"></a></div>