#app { height:100%; } .with-splash .framework7-root { padding-top: 0px; } .splash-screen { background-image: url(../modules/images/Default@2x~universal~anyany.png); background-repeat: no-repeat; background-position: center center; background-color: {{splashColor}}; background-size: cover; } @media only screen and (-webkit-min-device-pixel-ratio: 3) { .splash-screen { background-image: url(../modules/images/Default@3x~universal~anyany.png); } } @media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { .splash-screen { background-image: url(../modules/images/Default@2x~universal~comany.png); } } @media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { .splash-screen { background-image: url(../modules/images/Default@2x~universal~comcom.png); } } @media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { .splash-screen { background-image: url(../modules/images/Default@3x~universal~anycom.png); } } @media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) { .splash-screen { background-image: url(../modules/images/Default@3x~universal~comany.png); } }