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/main-bg@2x.png');
    }
  }

Create a class `.bg-transparent {background-color: transparent !important}`, and append to it — Yoarthur, Dec 07 '18 at 23:28
Hey @Yoarthur thanks for the tip, that doesn't do the trick :/ — MrRobot, Dec 08 '18 at 04:17
perphaps using the --background variable that lies in the theme. It should do the trick. — Yoarthur, Dec 08 '18 at 04:22
@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. — MrRobot, Feb 23 '19 at 13:50

score 1 · Answer 1 · edited Mar 07 '19 at 20:05

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.

score 1 · Answer 2 · answered Mar 08 '19 at 01:05

1

Ionic 4 solution, shorthand:

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

answered Mar 08 '19 at 01:05

Jay Ordway

1,708
2
11
33

score 1 · Answer 3 · answered Apr 06 '19 at 06:47

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;
}

score 1 · Answer 4 · answered Jul 21 '19 at 09:03

1

Put this into your components or pages scss.

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

answered Jul 21 '19 at 09:03

Alam

303
1
3
14

Ionic4 Background Image

4 Answers4