1

estoy teniendo un problema con css que no logro resolver. No es mi fuerte obviamente. Tengo una pantalla de login en ngx-admin (angular) y tengo colocada una imagen que a pantalla grande, se ve mal (Captura-mal1.PNG y Captura-mal2.PNG). Ahora bien, si abro el inspect del browser y la pantalla se achica, la imagen y los controles se ven bien (Captura-bien.jpg). No tengo muchas posibilidades de customizar esa pagina porque se hereda casi todo de ngx-admin, pero quizas se les ocurra como lo puedo solucionar. Les dejo el codigo:

<div class="container-logo">
  <h1 id="title" class="title">Bienvenido a Gestor</h1>

  <nb-alert *ngIf="showMessages.error && errors?.length && !submitted" outline="danger" role="alert">
    <p class="alert-title"><b>¡No se pudo identificar el usuario! Verifique el usuario y la contraseña.</b></p>
  </nb-alert>

  <nb-alert *ngIf="showMessages.success && messages?.length && !submitted" outline="success" role="alert">
    <p class="alert-title"><b>¡Bienvenido!</b></p>  
  </nb-alert>

  <form (ngSubmit)="login()" #form="ngForm" aria-labelledby="title">

    <div class="form-control-group">
      <label class="col-form-label" for="input-email">Nombre de usuario:</label>
      <input nbInput class="form-control"
        fullWidth
        [(ngModel)]="user.email"
        #email="ngModel"
        name="usernameOrEmail"
        id="input-email"
        placeholder="Nombre de usuario"
        autofocus
        [status]="email.dirty ? (email.invalid  ? 'danger' : 'success') : ''"
        [required]="getConfigValue('forms.validation.email.required')"
        [attr.aria-invalid]="email.invalid && email.touched ? true : null">
      <ng-container *ngIf="email.invalid && email.touched">
        <p class="error-message" *ngIf="email.errors?.required">
      ¡El nombre de usuario es obligatorio!
        </p>
      </ng-container>
    </div>

    <div class="form-control-group">
      <label class=" col-form-label" for="input-password">Contraseña:</label>
      <input nbInput class="form-control"
        fullWidth
        [(ngModel)]="user.password"
        #password="ngModel"
        name="password"
        type="password"
        id="input-password"
        placeholder="Contraseña"
        [status]="password.dirty ? (password.invalid  ? 'danger' : 'success') : ''"
        [required]="getConfigValue('forms.validation.password.required')"
        [minlength]="getConfigValue('forms.validation.password.minLength')"
        [maxlength]="getConfigValue('forms.validation.password.maxLength')"
        [attr.aria-invalid]="password.invalid && password.touched ? true : null">
      <ng-container *ngIf="password.invalid && password.touched ">
        <p class="error-message" *ngIf="password.errors?.required">
      ¡La contraseña es obligatoria!
        </p>
        <p class="error-message" *ngIf="(password.errors?.minlength || password.errors?.maxlength)">
      La Contraseña debería contener
      de {{ getConfigValue('forms.validation.password.minLength') }}
      a {{ getConfigValue('forms.validation.password.maxLength') }}
      caracteres
        </p>
      </ng-container>
    </div>

    <button nbButton class="btn btn-claro"
        fullWidth
        status="success"
        [disabled]="submitted || !form.valid"
        [class.btn-pulse]="submitted">
  Ingresar
    </button>

    <section class="another-action" aria-label="Register">¿Olvidaste tu usuario y/o contraseña?
      <a class="text-link" (click)="forgotPassword()">Reestablecer</a>
    </section>
  </form>
</div>

y el codigo css que yo agregué es el siguiente:

::ng-deep .title-gestor {
    text-align: left;
}

::ng-deep nb-auth-block {
    background-image: url(../../../../assets/images/back-6-claro.png);
    background-size: cover !important;
    background-repeat: no-repeat;
    background-position: center center;
    text-shadow: 0.5px 0.5px white;

    max-width: 100% !important;
    max-height: 100% !important;

    display: inline !important;
    margin: unset !important;
}

::ng-deep .container-logo {
    margin-left: 300px;
    width: 400px;
    margin-top: 10px;
}

el resto del codigo css es heredado y mucho no puedo tocar!. Como podría hacer que básicamente la imagen se resizee y mantenga el aspecto en casi cualquier resolucion (desde 1024 en adelante) y que los controles de login permanezcan en el centro?. Gracias de antemano. Esta es la captura que se vé bien: introducir la descripción de la imagen aquí

Estas dos siguientes son las capturas que se ven mal: introducir la descripción de la imagen aquí

1 respuesta 1

0

Hola amigos primero tu codigo no se entienda la verdad o quiza yo no lo entendi porque no esta bien estructurado te recomiendo leer el libro code clean

ejemplo

mientras veia tu codigo te sugiero que en vez de poner asi:

background-image: url(../../../../assets/images/back-6-claro.png);
    background-size: cover !important;
    background-repeat: no-repeat;
    background-position: center center;

todo eso se podria resumir en :

background: url(https://p4.wallpaperbetter.com/wallpaper/399/523/602/kitten-cat-animals-4k-wallpaper-preview.jpg) no-repeat center center fixed; 

con lo que entendi de tu pregunta fue que tienes problemas al poner una imagen en el fondo completo , supongo que querias hacer algo asi:

example 2

codigo:

  background: url(https://p4.wallpaperbetter.com/wallpaper/399/523/602/kitten-cat-animals-4k-wallpaper-preview.jpg) no-repeat center center fixed; 
   background-size: cover;

4
  • es solo un ejemplo para formatear en los diferentes navegadores y sus versiones aunque actualmente ya no es muy necesario pero deberias de ponerlo por si algun usuario no tiene la ultima version del navegador aunque con el primero es suficiente es depende del devs.
    – simon
    Commented el 8 jul. 2020 a las 0:03
  • yo solo puse el ejemplo porque depende si el usuario usa una version antigua de google o opera por ejemplo (aunque eso rara vez pasa pero deberias de tenerlo en cuenta que la gente no es IT no sabe que show con esto mientras le funcion it okay para ellos) , porque ejemplo conozco mucha gente que son de HR que usan version del 2016 de google chrome porque mientras le funcione para ellos todo bien, te lo menciono porque hace unos dias tuvimos un bug en el sistema de la empresa y el problema no era el codigo era el navegador LOL :(
    – simon
    Commented el 8 jul. 2020 a las 0:10
  • ahora lo que mejoró es que en cualquier tamaño de pantalla veo lo mismo, pero en ningun caso veo la imagen completa...me faltan partes arriba y abajo de la imagen. Commented el 8 jul. 2020 a las 12:17
  • comparte un screen de lo que vez
    – simon
    Commented el 11 jul. 2020 a las 17:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.