Search code examples
cssmobiletablet

Losing background image in mobile view

I need to lose the background image in mobile view but my @media query seems to be ignoring the request, this also applies to an image I am using too?

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    .logo {
    background-image:URL(img/allthingslogoalt.gif);
    height:32px;
    width:222px;
    margin:110px auto 0 auto;
    background-size:444px 64px;
}

}   

}


@media screen and (max-device-width: 800px) {

#allthingsus {
    background-color:#FFF;


}

}


@media screen and (max-device-width: 480px) {
#allthingsus {
    background-color:#FFF;


}
}

Here is the main css:

.logo {
    background-image:URL(img/allthingslogo.gif);
    height:64px;
    width:444px;
    margin:180px auto 0 auto;
}

#allthingsus {
    background-color:#FFF;
    background-image:URL(img/greypointer.gif);
    background-repeat:no-repeat;
    background-position:top center;


}

i am not sure how to cure this problem? I have tried adding it as a class, an ID, changing the min/max heights but nothing changes?

Solution

  • Assuming this is the bit that is attempting to change your background image:

    @media screen and (max-device-width: 480px) {
#allthingsus {
    background-color:#FFF;
}

    You're only setting a background-color and therefore not changing the background-image. You need to set background-image: none; for this media query.

    Edit

    Couldn't really test using the media query max-device-width so have done a fiddle here (http://jsfiddle.net/rnewport/em35H/1/) using max-width instead and it seemed to be working ok for that