如何使背景圖像響應並在移動設備上顯示

Question

我設法將背景圖片顯示在台式設備上並做出響應，但是當我在移動設備上查看網站時，背景圖片沒有顯示。

這是我到目前為止的代碼：

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

Answer 1

將此插入您的頭部：

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

將background-size to 100vh的高度100vw為100vw ，將寬度100vw為100vw

Answer 2

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

Answer 3

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