Media query is not getting applied on footer background image

Media query is not getting applied on footer background image

2. I am applying media queries for a background image in the footer for retina and ipad air2 and ipad2 but it is not getting applied properly.....this is the code i am applying...

@media only screen
and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2)
{
    .div_footer
    {
        background:url(../img/footer_portrait.png) no-repeat ;
         background-size:100%;
       
    }
 
}
/*Retina iPad-- Landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2)
{
    .div_footer
    {
        background:url(../img/footer_landscape.png) no-repeat ;
         background-size:100%;
    }
}

/* iPad-- Landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
and (orientation : landscape)
{
    .div_footer
    {
        background:url(../img/footer_landscape.png) no-repeat ;
         background-size:100%;
    }
}

/* iPad-- Portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
and (orientation : portrait)

    .div_footer
    {
        background:url(../img/footer_portrait.png) no-repeat ;
         background-size:100%;
         height:101px
    }
}


Is there any alternate solution for this ???