Search code examples
androidcssbackground-size

background-size cover not maintaining aspect ratio, android chrome

On desktops, iPad the image in the background maintains its aspect ratio when the element has background-size: cover , but on my Android phone (chrome) the image seems to act more like width:100%;height:100%,

You can see it in action here.

Here's a screenshot from my phone

// Markup
<div class="wrapper">
  <div class="content">
...

// Style
html, body {
  height: 100%
}

.wrapper {
  position: relative;
  height: 100%;
  background-image: url(...);
  background-size: cover;
  ..vendor prefixes..
}
Solution

  • I had a similar issue and it was pretty difficult to debug, but eventually I managed to find the reason: image pixel size.

    TL;DR
    Don't use big sized images, mobile devices don't like em, use max 2000px wide pics.

    Few more details

    Simply put, mobile devices can't handle big sized images, depending on model and OS. The results may vary: some may simply break, others display a blank image or distortions like the one in this question, and sometimes even return a 404 error! (been there, done that).

    I've found info on this issue in many places here on SO and elsewhere on the web, a good article is this with a nice tool to calculate image size:
    http://www.williammalone.com/articles/html5-javascript-ios-maximum-image-size/.

    The ideal image size to use shouldn't be more than 2000px from my tests, mostly to support the largest (and oldest too) part of mobile devices, but it's recommended to test out depending on your needs.