'Background-size: cover' not working on Android

Ionic Framework ionic-v3
1

Hi,

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…

home.html:

<ion-header>
  <ion-navbar>
    <ion-title>home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content fullscreen padding>

</ion-content>

home.scss:

page-home {
  ion-content{
    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:

e6b1fd8cb9ae5bb7e6748c07c8121e58
e6b1fd8cb9ae5bb7e6748c07c8121e58.jpg2880×1370 507 KB

Also perfect on a built iOS app:

c0228be053f419548b7c2480710989c9
c0228be053f419548b7c2480710989c9.jpg794×1366 164 KB

But not at all working correctly on Android device:

a05906634f489d426991c3fc6e6d7cac
a05906634f489d426991c3fc6e6d7cac.jpg618×1276 156 KB

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:

2

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

3

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?

Thanks!

4

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

5

Doesn’t work :frowning:

html:

<ion-header>
  <ion-navbar>
    <ion-title>intro</ion-title>
  </ion-navbar>
</ion-header>

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

scss:

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).

6

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