CODEWITHSUNDEEP
csswordpressresponsive-designmedia-queries
A.Casa
A.Casa

Reputation: 65

Media queries: background-image not displayed

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.

Upvotes: 0

Views: 928

Answers (3)

Goombah
Goombah

Reputation: 2855

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

Upvotes: 0

Jordi Flores
Jordi Flores

Reputation: 2150

Checkout that you have not closed quotes - " 

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

should be:

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

Upvotes: 1

AshboDev
AshboDev

Reputation: 370

Change your min-device-width to min-width, that should do the trick. See this for more info!

Upvotes: 1

Related Questions