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]');
    }
  }

Circassian

Create a class .bg-transparent {background-color: transparent !important}, and append to it – Ajar

Hey @Ajar thanks for the tip, that doesn't do the trick :/ – Circassian

perphaps using the --background variable that lies in the theme. It should do the trick. – Ajar

Instead of posting update you can answer your own question – Dinse

@VarunSukheja there is still no answer. The updates was just in case me or somebody else would come across temporary solutions while there is a a final solution. – Circassian

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.

Bombardon

Answer 2

Ionic 4 solution, shorthand:

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

Chiao

Answer 3

For ionic version 4 it uses so-called Shadow DOM technique which prevents you from doing so,

Run your app and inspect the body or ion-content i mean , you will find some inspected elements wrapped into <shadow-root> which indicates that all of my inside elements are private, The only way to editing them by provided variables, So for your issue try the following:

ion-content {
  --ion-background-color: transparent !important;
}

Hegelian

Answer 4

Put this into your components or pages scss.

 ion-content{ 
    --background: #fff url('../../assets/images/cover.jpg') no-repeat center center / cover;
     }     

Devalue