Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ionic4 Background Image

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]');
    }
  }
like image 903
MrRobot Avatar asked Dec 07 '18 16:12

MrRobot


2 Answers

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.

like image 120
Kapil Raghuwanshi Avatar answered Oct 18 '22 15:10

Kapil Raghuwanshi


Ionic 4 solution, shorthand:

:host {
  ion-content {
    --background: url('../../../assets/imgs/splash.png') no-repeat center center / cover;
  }
}
like image 21
Jay Ordway Avatar answered Oct 18 '22 13:10

Jay Ordway