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>


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

when I try this is giving me an error:

Any suggestion

try in .scss

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

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

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

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

1 Like


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

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;

1 Like