媒体查询：未显示背景图像

Question

我正在尝试 here 在您通过移动设备（平板电脑和智能手机）访问网站时为每个页面添加不同的背景图片。

如您所见，我使用的是 Wordpress 和 fullPage.js

我在 CSS 中尝试过，但没有任何结果：

/* ----------- iPhone 4 and 4S ----------- */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
      #beste-lage { background-image: url(http://ap.nowcommu.myhostpoint.ch/wp-content/uploads/2016/07/text.png) !important; }
}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
      #beste-lage { background-image: url(http://ap.nowcommu.myhostpoint.ch/wp-content/uploads/2016/07/text.png) !important; }
}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) { 
      #beste-lage { background-image: url(http://ap.nowcommu.myhostpoint.ch/wp-content/uploads/2016/07/text.png) !important; }
}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) { 
      #beste-lage { background-image: url(http://ap.nowcommu.myhostpoint.ch/wp-content/uploads/2016/07/text.png) !important; }
}

任何提示将不胜感激。

Answer 1

结帐你没有关闭报价 - "

 #beste-lage { background-image: url("http://ap.nowcommu.myhostpoint.ch/wp-content/uploads/2016/07/text.png); }

应该是：

#beste-lage { background-image: url(http://ap.nowcommu.myhostpoint.ch/wp-content/uploads/2016/07/text.png) }

Answer 2

将您的min-device-width 更改为min-width，应该可以解决问题。请参阅this 了解更多信息！

Answer 3

背景不是#beste-lage，而是.bt-op-item-content。