Set background image - Ionic 4

Ionic Framework ionic-v3
1

I want o set background image for Ionic 4 Application (all page). This was pretty straight forward when using Ionic 3 but the same approach didn’t worked here. I read the theming of Ionic 4 but I couldn’t find a way to set an image as background.

As given in the document, background colour can be set and it worked.

:root {
    --ion-background-color: linear-gradient(197deg, rgba(100,100,100,1) 0%, rgba(63,63,63,1) 13.5%, rgba(29,29,29,1) 33.33%, rgba(0,0,0,1) 100%) !important;
}

But on setting the image as background, it didn’t responds,

:root {
    --background: url('assets/imgs/appBg.png') no-repeat fixed center; 
}
 As well, setting remote images worked by local images didn't worked. The below is the working code

ion-content{
  --background: url(https://i.stack.imgur.com/mSXoO.png)!important;
  --background-repeat: no-repeat;
  --background-size:100% 100%;
}

And the below didn't worked.

ion-content{
    --background: url(../../assets/imgs/appBg.png) !important;
    --background-repeat: no-repeat;
    --background-size:contain;
  }

Like to know what is the possible way to set image background in Ionic 4. Thanks.
2

Hi,

I got it working with:

ion-content {
  --background: #fff url("../../assets/img/wap3.png") no-repeat center center / cover;
}

The image was placed in src/assets/img/ folder

3

Hi,

Where did you find these paramters ?