1

Gostaria de adicionar um background image no fundo do meu login

Segue o codigo html da minha 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>

Codigo do meu 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

2
  • do login inteiro? no caso para ficar de fundo. Commented 22/02/2019 às 2:37
  • Sim, queria isso mesmo, porem não consigo, ja tentei dessa forma da foto e tentei uma classe com background-image e nada tambem Commented 22/02/2019 às 12:08

1 Resposta 1

2

Pelo código, eu presumo que a versão que você está usando é o 4 do Ionic.

Sendo assim, para alterar o background do ion-content, você usa:

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

3
  • Realmente é o ionic 4, Muito obrigado! Deu certo. Commented 22/02/2019 às 23:44
  • Tem algum site para me indicar alem da docs ? muita duvida não é salientada lá kk, a adiçao da imagem deu certo, mais preciso personalizar ela, ajustar ela Commented 23/02/2019 às 0:04
  • Sobre o Ionic 4, tudo ainda é muito novo, mas eu te recomendo aprender sobre as variáveis do CSS. Para descobrir quais variáveis o componente aceita, abra o Chrome Tools e clique no elemento e vai olhando as variáveis de CSS que ele aceita, e dessa forma, você descobre quais propriedades você consegue alterar. Recomendo também estudar sobre Shadow DOM, coisa que foi adotada pelo Ionic nessa versão para criação dos componentes. Caso queira ver um vídeo, esse aqui explica um pouco das variáveis CSS no Ionic 4. Commented 23/02/2019 às 12:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .