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

我已经设法获得背景图像以在桌面设备上显示并且响应，但是当我在移动设备上查看网站时，背景图像不显示向上。如何使背景图像响应并显示在移动设备上

继承人的代码，我到目前为止有：

#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%; 
}

来源

2015-06-22 RobHoy

小提琴或它没有发生 –

检查您的媒体查询..可能是在移动版本它隐藏的响应原因..或显示小提琴。 –

插入这对你的头：用于高度

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

变化background-size to 100vh和100vw的宽度

来源

2015-06-22 11:29:32 mysterious

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

来源

2015-06-22 11:39:17

所以你想应用这个？ –

'#intro { background：url（../ img/trees.png）无重复固定中心;' –

感谢您的回复，我已经合并了这个和背景调整大小，因为我改变窗口的大小这是一个很好的桌面。但是，如果您在移动设备上查看该网站，则可以看到背景图像高度未发生充分变化 – RobHoy

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

来源

2015-06-22 11:49:50 Rajkishore

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

回答

相关问题