0
@media only screen and (min-device-width: 768px)
        and (max-device-width: 1024px) and (orientation: portrait) {
    .page-id-4194 {
        background: url("http://website.es/wp-content/homepage-bg5.jpg") 
        repeat-x left top 44px #FFFFFA !important;
    }
}

I can't get my head around why the background image I applied to the body (code above) works in the desktop computers' browsers but not in mobile devices'.

The code above is meant to override the current background applied to the body.

Any ideas please?

bdesham
  • 15,430
  • 13
  • 79
  • 123
secuaz
  • 459
  • 3
  • 6
  • 15
  • 3
    Are you missing a `#` before the element ID? – bdesham Jun 19 '13 at 14:48
  • 1
    You probably should try to avoid using `!important` if at all possible also. – gaynorvader Jun 19 '13 at 14:52
  • Yes, I was forgetting it, it is a class i was missing the "." – secuaz Jun 19 '13 at 15:13
  • What can I use instead of !important??? thank youu – secuaz Jun 19 '13 at 15:14
  • Unfortunately even by adding the "." it still doesn't work :S – secuaz Jun 19 '13 at 15:41
  • Found it thank you, http://stackoverflow.com/questions/3427766/should-i-avoid-using-important-in-css – secuaz Jun 19 '13 at 16:43
  • Any thoughts about how to force the mobile devices into interpreting the background applied to body?? – secuaz Jun 19 '13 at 16:54
  • @user1791939: Two ways, you can simply place the updated css further down the page or you can use [specificity](http://css-tricks.com/specifics-on-css-specificity) to overwrite something. Also could you provide a sample of your code, a [jsfiddle](http://www.jsfiddle.net) perhaps? – gaynorvader Jun 20 '13 at 09:14
  • @gaynorvader thanks very much for such an awesome resource, im going to apply it now.. – secuaz Jun 20 '13 at 15:42
  • I managed to make the images show, what was happening was (left top 44px) didn't work on the devices. The key was a better knowledge of specificity in css. – secuaz Jun 21 '13 at 08:33

0 Answers0