如何使背景图像响应并在移动设备上显示答案

【问题标题】：How to make a background image responsive and show on mobile devices如何使背景图像响应并在移动设备上显示
【发布时间】：2015-06-23 02:55:24
【问题描述】：

我已经设法让背景图片显示在桌面设备上并做出响应，但是当我在移动设备上查看该网站时，背景图片不显示。

这是我到目前为止的代码：

#intro{ 
background: url(../img/trees.png) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/trees.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/trees.png', sizingMethod='scale')";
min-height: 100%;
}

【问题讨论】：

小提琴或者它没有发生
检查您的媒体查询..可能是在移动版本中，它出于响应原因被隐藏..或显示小提琴。

标签： html css mobile web

【解决方案1】：

body{
  width: 100%;
  height: 100%;
  margin: 0px;
  background: url(../image/background.jpg) no-repeat fixed top center;
  background-size: cover;
}

【讨论】：

那么你想在哪里应用这个？？
#intro { background: url(../img/trees.png) no-repeat fixed center;
感谢您的回复，我已将其合并，并且在我更改桌面上窗口的大小时背景会调整大小，这很好。但是，如果您在移动设备上查看该网站，您会发现背景图片高度没有充分变化

【解决方案2】：

使用#intro{ background-size:100% 100%;}

【讨论】：

【解决方案3】：

把这个插入你的脑袋：

<meta name="viewport" content="width=device-width, initial-scale=1">

将background-size to 100vh 更改为高度，将100vw 更改为宽度

【讨论】：