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>
Thank you very much,now is working.The path was wrong.
04-05-2019
This is the working solution for me.
ion-content {
--background: url('/assets/img/background/background.png') no-repeat 100% 100%;
}
@Ludolefrenchy : thanks its working
All the solutions posted here cause the img to be either cropped significantly or distorted.
this worked better for me:
ion-content.background1 {
–background: url(…/…/…/assets/img/background1.png) no-repeat center center / cover;
}
dont make any class in ion-content here is only path issues use this
–background: url(…/…/assets/images/bg.png) no-repeat 100% 100%;
Thank you, it’s working.
BTW can you explain how that snippet works? I am no good at css but want to learn.
Thank you , very good !!
You helped me too, thanks 
Works perfectly but not for a given component rather it take all the other ion-content(s) in the application
thank u…
it helps me