How to use different image on screen of different density in ionic?

ionic-v1
1

I am creating an ionic app. My requirement is to use different images on different screen density. I have written media queries for different screen density. But that media query is not consistent with the results when I have tested my apk on pcloudy. Here are my media queries -

  @media screen and (-webkit-device-pixel-ratio: 0.75) and (orientation: portrait) {
  .login-background {
      background: url(images/screen_white_bg_ldpi.png) no-repeat;
      background-position: center center; 
      background-size: 100% 100%;
      background-attachment: fixed;
     /*-webkit-background-size: 100%;*/
    } 
 }

  @media screen and (-webkit-device-pixel-ratio: 1) and (orientation: portrait) {
      .login-background {
       background: url(images/screen_white_bg_mdpi.png) no-repeat;
       background-position: center center; 
       background-size: 100% 100%;
       background-attachment: fixed;
       /*-webkit-background-size: 100%;*/
     } 
   }

    @media screen and (-webkit-device-pixel-ratio: 1.5) and (orientation: portrait) {
        .login-background {
         background: url(images/screen_white_bg_hdpi.png) no-repeat;
         background-position: center center; 
         background-size: 100% 100%;
         background-attachment: fixed;
         /*-webkit-background-size: 100%;*/
       } 
     }

   @media screen and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {
      .login-background {
       background: url(images/screen_white_bg_xhdpi.png) no-repeat;
       background-position: center center; 
       background-size: 100% 100%;
       background-attachment: fixed;
       /*-webkit-background-size: 100%;*/
      } 
    }

   @media screen and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
      .login-background {
       background: url(images/screen_white_bg_xxhdpi.png) no-repeat;
       background-position: center center; 
       background-size: 100% 100%;
       background-attachment: fixed;
       /*-webkit-background-size: 100%;*/
     } 
   }

 @media screen and (-webkit-device-pixel-ratio: 4) and (orientation: portrait) {
.  login-background {
   background: url(images/screen_white_bg_xxxhdpi.png) no-repeat;
   background-position: center center; 
   background-size: 100% 100%;
   background-attachment: fixed;
   /*-webkit-background-size: 100%;*/
   }  
 }

Can anyone tell me where I am going wrong?