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

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

您尚未关闭结帐 quotes - "

 #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 上。

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

Media queries: background-image not displayed

css

wordpress

media-queries

responsive-design