Ion-content Background Image Media Query not working

I am using media query to load different image for iphone 6 and iphone 6+ but it is not working, without media query it is working on iphone

my css is as follows

@media screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) { 

.scroll-bg {
      background: url("../img/iphone_6_bg_com.png") repeat center center fixed;
    background-size: cover;   
    }
  
}

I have tried as well following

@media screen and (max-device-width: 375px) {
    .scroll-bg {
          background: url("../img/iphone_6_bg_com.png") repeat center center fixed;
         background-size: cover;   
        }

}

Any one please can help me?