Ionic4 Background Image

Question

Is there a way to have an image as background on IONIC4? I can't find anywhere on the documentation and any CSS class I apply doesn't work. There is a host property that always takes over the background.

I tried setting the ion-content to a transparent background by creating a property called "trans" on the theme/variables.scss

.ion-color-trans {
  --ion-color-base: transparent;
}

and on the html file I called <ion-content color="trans"> the issue is that the application gets ridiculously slow. There are delays on the taping and the background blinks on page transition.

---

UPDATE:

After researching like there is no tomorrow I found a way to fix that. On the SCSS file of that specific page/component, add the following line:

:host {
    ion-content {
      --background: url('../../assets/images/[email protected]');
    }
  }

Answer 1

Ionic 4 solution:

Please apply below css to your .scss page for perfect background page:

.page-background-image {
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(./../assets/images/mybg.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    height: 50vh;
  }

where 0.5 is opacity in linear-gradient of background.

Answer 2

Ionic 4 solution, shorthand:

:host {
  ion-content {
    --background: url('../../../assets/imgs/splash.png') no-repeat center center / cover;
  }
}