'Background-size: cover' not working on Android


I’m tearing my hair out! I’ve been fighting this issue for 3 days, searched every forum and tried at least 50 ideas but I can’t seem to find a fix.

The problem: ‘Background-size: cover’ is not working on my physical Android device. It’s a fairly new device running Android 8+ and I’m not sure what version of Android browser.

To troubleshoot, I started a new blank Ionic 3 project (also tested with 4) and created a new home page…



<ion-content fullscreen padding>



page-home {
    background: #fff url('../../assets/imgs/bg5.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

bg5.jpg for testing is a large (4672 × 3104) landscape aspect image.

My app only uses portrait mode, and I want the background image to preserve aspect, position in the dead centre of the screen, cover the full screen and not repeat.

On browser ($ionic serve) the display is perfect:

Also perfect on a built iOS app:

But not at all working correctly on Android device:

It seems to be displaying a portion of the image from the bottom right corner and hasn’t resized/cropped correctly.

I won’t list everything I’ve tried immediately, as it’ll make for a huge post, but I will say one of the things I checked was cross-browser compatability on background-size. I read that some older Android browsers don’t like short-hand so I tried to be explicit on that. Didn’t help though.

Please could someone help me out with this - I’m totally beat! Thanks :slight_smile:

have you tried object fit cover for the image instead of applying the style to content

just apply object fit cover for the image in your background and it will work like heaven

and please do point me if i m wrong

Thanks for the response :slight_smile:

I did find a section on object-fit: cover when I was reading about the <ion-img> tag and how it works.

I’m not sure I follow exactly what you mean when you refer to styling the image rather than the content element. Could you refactor the code given above in home.html and home.scss to show me exactly what you mean?


Yeah I just said that apply style for the image instead of applying style to the content tag

Doesn’t work :frowning:



<ion-content fullscreen>
  <ion-slides pager id="slides">
      <img class="image-cover" src="../../assets/imgs/bg5.jpg" />


page-intro {
  #slides {
    height: 100%;
  ion-slide .slide-zoom {
    height: 100%;
  .image-cover {
    height: 100%;
    object-fit: cover;

Same result as the Android image above (not centered, not covering).

Sorry for the late response

toggle css between object-fit:cover or object-fit:contain with width 100% and will work for image height doesn’t work