Question

这是我的fiddle

现在看this screenshot from my mobile device

图像将始终覆盖桌面上的任何尺寸的整个屏幕。

但是在移动设备中，它并没有覆盖整个屏幕，为什么？

代码

<h1>Hello</h1>

CSS：

   body  {

    margin: 0px; /* Background Image Margin will be 0 */
    background-image: url('http://i.imgur.com/lKW3jvz.jpg'); /*  Background Image Linki */   
    background-repeat: no-repeat;  /* Background Image Will not repeat */
    background-attachment: fixed;  /* Background Image will stay fixed */
    background-size: cover; /* This will make background image width 100% and height 100% */


}

Answer 1

你的身体不是窗口高度的100％，所以如果你添加

html, body {
  height: 100%;
}

然后它涵盖了整个页面。演示：jsfiddle

Answer 2

更新以下css

body, html {
  min-height:100%;
  height:100%;  /* if not working try vh instead of % */
}

＆＃13;

body, html {
  min-height:100%;
  height:100%;  /* if not working try vh instead of % */
}
body  {
	
	margin: 0px; /* Background Image Margin will be 0 */
    background-image: url('http://i.imgur.com/lKW3jvz.jpg'); /*  Background Image Linki */   
    background-repeat: no-repeat;  /* Background Image Will not repeat */
    background-attachment: fixed;  /* Background Image will stay fixed */
    background-size: cover; /* This will make background image width 100% and height 100% */
	
	
}

＆＃13;

<h1>Hello</h1>

＆＃13;

Answer 3

background-size：封面使背景图片尽可能大而不拉伸它，你可以在这里阅读w3schools：

将背景图像缩放为尽可能大背景区域完全被背景图像覆盖。一些部分背景图像可能不在背景中定位区域

在移动设备中你的背景不是全高的原因是你的身体标签没有高度。

body  {
    margin: 0px; /* Background Image Margin will be 0 */
    background-image: url('http://i.imgur.com/lKW3jvz.jpg'); /*  Background Image Linki */   
    background-repeat: no-repeat;  /* Background Image Will not repeat */
    background-attachment: fixed;  /* Background Image will stay fixed */
    background-size: cover; /* This will make background image width 100% and height 100% */
    height: 100vh;
}

<h1>Hello</h1>

JSFiddle

背景图像是桌面上100％的屏幕，但不是移动设备

3 个答案: