How to put a background image in my ion-content

Asked

Viewed 3,271 times

1

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

Segue o estado atual da minha tela de login

css ionic sass background background-image

  • of the whole login? in case to stay background.

  • Yes, I really wanted to, but I can’t, I tried that way of the photo and tried a class with background-image and nothing too

1 answer

2


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

  • It really is the Ionic 4, Thank you very much! It worked.

  • Do you have a website for me besides Docs ? much doubt is not stressed there kk, the addition of the image worked out, more need to customize it, adjust it

  • About Ionic 4, everything is still very new, but I recommend you learn about CSS variables. To find out which variables the component accepts, open Chrome Tools and click on the element and look at the CSS variables it accepts, and this way, you discover which properties you can change. I also recommend studying on Shadow DOM, something that was adopted by Ionic in this version to create the components. If you want to watch a video, this one explains some of the CSS variables in Ionic 4.

Browser other questions tagged css ionic sass background background-image

You are not signed in. Login or sign up in order to post.