背景图像在桌面上是100％的屏幕，但不是在移动设备上 [英] Background image is 100% of the screen on desktop but not on mobile

问题描述

这是我的小提琴

请参阅这从我的桌面截图

现在，从我的移动设备上查看截图

图像将始终覆盖桌面上的整个屏幕，无论窗口大小如何。

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

代码

 < h1> Hello< / h1> ; 
  

CSS：

  body {
 
 margin：0px; / *背景图片边距将为0 * / 
 background-image：url（'http://i.imgur.com/lKW3jvz.jpg'）; / * Background Image Linki * / 
 background-repeat：no-repeat; / *背景图片不会重复* / 
 background-attachment：fixed; / *背景图片将保持不变* / 
 background-size：cover; / *这将使背景图像宽度100％和高度100％* / 
 
 
} 
  

解决方案

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

  html，body {
 height：100％; 
} 
  

然后覆盖整个页面。演示： jsfiddle

This is my fiddle

See this screenshot from my desktop

Now see this screenshot from my mobile device

The image will always cover the whole screen in desktop, at any size of the window.

But in mobile, it is not covering the whole screen,why?

Code

<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% */


}

解决方案

Your body isn't 100% of window height, so if you add

html, body {
  height: 100%;
}

Then it covers the entire page. Demo: jsfiddle

这篇关于背景图像在桌面上是100％的屏幕，但不是在移动设备上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！