Media queries: background-image not displayed

Question

I am trying here to add a different background image for every single page as soon you visit the website on mobile (Tablet and Smartphones).

As you can see, I am using Wordpress and fullPage.js

I tried this in CSS, but without any result:

/* ----------- 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; }
}

Any tips would be appreciated.

Answer 1

The background isn't on #beste-lage but on .bt-op-item-content.