2

introducir la descripción de la imagen aquí

El fondo animado no se adapta al 100% de la pantalla. Cuando cambio height:100% por 100vh se repite dos veces la animación exageradamente.

Uso bootstrap y cosas de angular/form.

introducir la descripción de la imagen aquí

/*Arreglar pixeles*/
section {
    height: 100%;
    background: linear-gradient(-45deg, #291f2e, #3b2e42, #423549, #61516b,  #423549, #3b2e42, #291f2e);
    background-size: 400% 400%;
    animation: gradient 3s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.flex-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}


.access{
    padding:50px;
    padding-bottom: 150px;
    margin:75px;
    background-color: #3b2e42;
}

h2 {
    color:#fa4347;
    text-align: center;
}

.button{
    display: flex;
    justify-content: center;
}
button{
    background-color: #fa4347;
    color: #423549;
    border-style:none; 
    border-radius: 0px;
    height: 50px;
    font-size: 20px;
}
button:hover{
    background-color: #ff5a5c;
    color: #423549;
    border-style:none; 
    border-radius: 0px;
    height: 50px;
}
<section>
    <div class="button">
      <a routerLink="/"><button>Volver</button></a>
    </div>
  <article>
    <div class="flex-container">
      <div class="access">
        <h2>INICIAR SESIÓN</h2>
        <app-login-input></app-login-input>
      </div>
      <div class="access">
        <h2>REGISTRARSE</h2>
        <app-register-input></app-register-input>
      </div>
    </div>
  </article>
<section>

Cuando inspecciono elemento no me toma toda la pagina, solo lo que esta dentro del contenedor, pero no se como hacer que abarque toda la pantalla

introducir la descripción de la imagen aquí

1
  • 1
    Puedes intentar cambiar el contenedor que va tener la imagen de fondo, si la necesitas que te abarque todo el contenkdo de la pagina, puedes probar colocandola en el <body>? tambien puedes probar utilizar alguna propiedad como el background-size: 100%, o cover, para evitar que el fondo se replique que es el comportamiento por defecto o utilizar la propiedad, background-repeat: no-repeat
    – AugustoM
    Commented el 17 abr. 2023 a las 22:23

1 respuesta 1

2

Basta con agregar la animación a la etiqueta body en lugar de hacerlo solo a la etiqueta section.

body{
  all: unset;
}

section {
  height: 100%;
  background: linear-gradient(-45deg, #291f2e, #3b2e42, #423549, #61516b, #423549, #3b2e42, #291f2e);
  background-size: 400% 400%;
  animation: gradient 3s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.access {
  padding: 50px;
  padding-bottom: 150px;
  margin: 75px;
  background-color: #3b2e42;
}

h2 {
  color: #fa4347;
  text-align: center;
}

.button {
  display: flex;
  justify-content: center;
}

button {
  background-color: #fa4347;
  color: #423549;
  border-style: none;
  border-radius: 0px;
  height: 50px;
  font-size: 20px;
}

button:hover {
  background-color: #ff5a5c;
  color: #423549;
  border-style: none;
  border-radius: 0px;
  height: 50px;
}
<body>
  <section>
    <div class="button">
      <a routerLink="/"><button>Volver</button></a>
    </div>
    <article>
      <div class="flex-container">
        <div class="access">
          <h2>INICIAR SESIÓN</h2>
          <app-login-input></app-login-input>
        </div>
        <div class="access">
          <h2>REGISTRARSE</h2>
          <app-register-input></app-register-input>
        </div>
      </div>
    </article>
  <section>
</body>

5
  • no me lo permite. Quizá sea porque uso angular. El error que aparece es "Hash: 5182bc7de203f4c7 - Time: 220ms Error: src/app/components/login/login.component.html:19:10 - error NG5002: Unexpected closing tag "body". It may happen when the tag has already been closed by another tag. For more info see w3.org/TR/html5/… 19 <section></body> ~~~~~~~ src/app/components/login/login.component.ts:7:16 7 templateUrl: './login.component.html', ~~~~~~~~~ × Failed to compile."
    – Carolina
    Commented el 19 abr. 2023 a las 21:13
  • El error lo que te está indicando es que tienes dos etiquetas de cierre </body>. Revisa tu código y asegurate de que tengas solo una etiqueta de apertura <body> y de cierre </body>.
    – DjCrazy
    Commented el 19 abr. 2023 a las 21:41
  • ahh es que mi angular viene con un index.html con un body que no voy a poder borrar ):
    – Carolina
    Commented el 20 abr. 2023 a las 20:41
  • Prueba con body{ all: unset;}. Edité la respuesta con el ejemplo.
    – DjCrazy
    Commented el 21 abr. 2023 a las 16:42
  • no funcionó. me sale el mismo error
    – Carolina
    Commented el 24 abr. 2023 a las 21:11

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.