How to add a background image to Ionic 4

Hello everyone,recently I switched to Ionic 4.But I have a problem for adding a background image to a page.I tried one solution posted in the forum Ionic 4 - Header background image but doesn’t worked.
Here’s my code:

<ion-content class="background-image" no-scroll padding>

</ion-content>

:host {
  .background-image {
    background: url('../assets/imgs/carp.jpg') no-repeat 100% 100%;
  }
}

when I try this is giving me an error:


Any suggestion
Thanks!

try in .scss

.background-image{
    --background: url(../assets/imgs/carp.jpg) 0 0/100% 100% no-repeat;
}

I tried but doesn’t work
Anyway I will go to Ionic v3 again,the new version seems to have many bugs

in my app i have in V4
home.page.scss

ion-content.background{
    --background: url(../../assets/img/backgroundviolet.png) 0 0/100% 100% no-repeat;
}

home.page.html

<ion-content padding class="background"></ion-content>
8 Likes

Thank you very much,now is working.The path was wrong.

1 Like

04-05-2019

This is the working solution for me.

ion-content {
    --background: url('/assets/img/background/background.png') no-repeat 100% 100%;
}
1 Like

@Ludolefrenchy : thanks its working

1 Like