My current challenge involves setting a background image for a mobile page using a new image specifically designed for mobile devices. The image is set with the property background-size: cover, and it works perfectly on all platforms except for mobile Chrome. In mobile Chrome, when scrolling occurs, the image seems to resize slightly. Additionally, there is an absolute footer in the design. To see this issue in action, you can visit the following link:
body {
height: 100%;
overflow: scroll;
}
.image {
display: block;
background: url(http://drawingimage.com/files/1/Shrek-Donkey-Beautiful-Image-Drawing.png) no-repeat center bottom;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.footer {
display: block;
position: absolute;
width: 100%;
bottom: -69px;
background-color: green;
}<body>
<div class="wrap">
<div class="image">
</div>
<div class="footer">
<p> Footer info </p>
<p> More footer info</p>
</div>
</div>
</body>