Creating an HTML5 app for iPhone4 and 5 with a texture-rich background. I'm facing an issue where the texture image gets scaled and only the central part is visible, even though the image size is 640x960 and 640x1136. I've tried adding @2x at the end, but it still scales down the image and I want the whole image to be visible. Here's the code snippet:
Code:
<div id="container" data-role="page" class="login_bg">
<section class="main" data-role="none">
....
....
</section>
</div>
CSS:
@media all and (min-width: 640px) and (max-height: 960px){
.login_bg {
width:100%;
height:960px;
background-image:url(../../img/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a183d05636c6a1a6822742a">[email protected]</a>);
background-repeat:no-repeat;
background-position: top center;
background-size:cover;
}
}
@media all and (min-width: 640px) and (max-height: 1136px){
.login_bg {
width:100%;
height:1136px;
background-image:url(../../img/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e6c49711f1f1d186e1c56005e4049">[email protected]</a>);
background-repeat:no-repeat;
background-position: top center;
background-size:cover;
}
}