Adicionar Imagem de Fundo em Tamanho Completo para o Login

O CRM Inovsat não oferece suporte oficial para imagem de fundo de login para a área de administração e a área dos clientes para manter a simplicidade, mas criamos um trecho simples de CSS que adicionará uma imagem de fundo perfeitamente alinhada e de largura total na área de administração, incluindo um efeito de fade sobre a imagem com CSS puro.

Imagem de fundo personalizada para o login na área de administração

  1. Se você adicionou uma cor personalizada para o fundo do login do administrador em Configuração->Estilo do Tema->Geral, remova-a e deixe em branco para evitar que estilos embutidos sobrescrevam o estilo de fundo da imagem.
  2. Crie um arquivo custom.css em assets/CSS Escolha uma imagem que deseja adicionar como plano de fundo. (pelo menos 1280 x 720px)
  3. Faça o upload da imagem, por exemplo, na pasta de mídia (ou onde preferir). No nosso caso, estará na pasta page-login e a URL será assim: https://app.rnanavais.com.br/page-login/login_admin.png
  4. Abra o arquivo custom.css e adicione o seguinte código:

[quote]

/* Remove this if you dont want background overlay over the image or adjust per your needs */
body.login_admin:before {
    content: " ";
    background: rgba(31, 31, 31, 0.7);
    min-height: 100%;
    min-width: 100%;
    position: absolute;
}
body.login_admin {
  background: url('https://app.rnanavais.com.br/media/page-login/bg1.jpg') no-repeat center center fixed; /* The full image url*/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
body.customers_login {
  background: url('https://app.rnanavais.com.br/media/page-login/bg1.jpg') no-repeat center center fixed; /* The full image url*/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
[unquote]


Você achou esse artigo útil?