Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

background no ionic

Boa noite,

Realizei o curso estou tentando setar o background em uma tela ( Tela de perfil do curso). O problema é que ele pega só metade do celular, não está funcionando na parte que tem uma imagem avatar.

Queria saber se alguém sabe como podemos incluir um background para funcionar inclusive atrás do avatar.

Obrigado

2 respostas

Boa noite, Victor! Como vai?

Pelo que entendi, provavelmente o que deve estar acontecendo é que o avatar tem um fundo diferente do que o que vc quer utilizar. Daí faz parecer que o que vc está fazendo não está funcionando. Veja se ao remover o avatar a tela toda fica com a cor que vc queria.

Se for isso mesmo, o que vc pode fazer é deixar o avatar com um fundo transparente aplicando a propriedade background-color: transparent.

Pegou a ideia? Qualquer coisa é só falar!

Espero que esteja curtindo o curso e o aproveitando ao máximo!

Grande abraço e bons estudos, meu aluno!

Bom dia , professor!

Já tinha tentado deixar transparente com esse código, mas nada adiantou. Segue o código que está no css e html.

page-perfil {

    .myview {


       background-image: url('https://i.pinimg.com/736x/b7/de/aa/b7deaa019a28268ae9de6df4aefce398--night-photography-galaxy-photography.jpg');
    }

    .avatar-wrapper {
        position: relative;
        width: 200px;
        margin: auto;

        ion-avatar img {
            position: relative;
            // background-color:transparent;
            width: 200px;
            height: 200px;
            margin: auto;
        }

        .btn-tirar-foto {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 45px;
            height: 45px;
        }
    }
}
``

E no HTML


```'
<ion-content class="myview">

  <ion-item no-lines >
    <div class="avatar-wrapper" transparent>
      <ion-avatar>
        <img src="assets/img/victor.png">
      </ion-avatar>
</div>

...

</ion-content>

tentei colocar o transparent em vários lugares já.

Desde ja obrigado pela resposta rápida. =)