Images not changing on mobile devices

Question

I want the images im using as the background to change to smaller versions through css media queries.

I'm not quite sure why it is not working on mobile devices.

@media only screen and (min-width: 375px) and (max-width: 667px) and (orientation : landscape){

#slide1 {
background: url(../images/slides/mobiletest.jpg) center center no-repeat;
-webkit-background-size: 100% 100%;
-moz-background-size: cover;
background-size: 100% 100%;
background-attachment: fixed;
width: 100%;}}

Answer 1

@media only screen and (min-width: 375px) and (max-width: 667px) and (orientation : landscape){

    html #slide1 {
        background: url(../images/slides/mobiletest.jpg) center center no-repeat;
        -webkit-background-size: 100% 100% !important;
        -moz-background-size: cover !important;
        background-size: 100% 100% !important;
        background-attachment: fixed !important;
        width: 100% !important;
    }
}

use !important in css hope it can work

Answer 2

This could really be some specifity issue. You can try adding a html selector before the element:

@media only screen and (min-width: 375px) and (max-width: 667px) and (orientation : landscape){

    html #slide1 {
        background: url(../images/slides/mobiletest.jpg) center center no-repeat;
        -webkit-background-size: 100% 100%;
        -moz-background-size: cover;
        background-size: 100% 100%;
        background-attachment: fixed;
        width: 100%;
    }
}