How to put a background image in my ion-content

Question

I would like to add a background image at the bottom of my login

Follow the html code of my login.page.html

 <ion-header>
  <ion-toolbar>
    <ion-title text-center>Login</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding class=”loginPage” scroll=”false”>
  <ion-list>

    <ion-item>
      <ion-label position="floating">Nome</ion-label>
      <ion-input type="text" [(ngModel)] = "nome"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label position="floating">Senha</ion-label>
      <ion-input type="password" [(ngModel)] = "senha"></ion-input>
    </ion-item>

  </ion-list>

  <ion-button fill="solid" expand="block" color="dark" (click)="login()">Logar</ion-button>
  <ion-button fill="outline" expand="block" color="success" (click)="encaminharRegister()">
      <ion-icon slot="start" name="add"></ion-icon>
      Fazer cadastro
  </ion-button>
</ion-content>

Code for my login.page.scss

page-home{
    ion-content{
        --ion-background: #ffff00 url('../../assets/imagem.png') no-repeat center center / cover !important;
    }
}

Answer 1

By code, I assume the version you’re using is Ionic 4.

Therefore, to change the background of ion-content, you use:

ion-content {
    --background: #ffff00 url('../../assets/imagem.png') no-repeat center center / cover !important;
}