0

estoy empezando en CSS y tengo un problema con los gradientes, tengo lo siguiente:

HTML:

<html>
<head>
    <title>WebSat - Login</title>
    <link rel="stylesheet" href="styles/login.css"/>
</head>
<body>
    <section id="container">
        <div id="logo">
            <img src="images/logo.png" alt="Logo empresa"/>
        </div>
        <div id="login-form">
            <form action="#">
                <input type="text" placeholder="Username"/><br/><br />
                <input type="password" placeholder="Password"/><br/><br />
            </form>
        </div>
    </section>
</body>

CSS:

*{
    margin: 0;
    padding: 0;
}

body{
    background: rgb(0,0,0);
    background: -moz-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(97,57,1,1) 47%, rgba(255,158,0,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(97,57,1,1) 47%, rgba(255,158,0,1) 100%);
    background: -o-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(97,57,1,1) 47%, rgba(255,158,0,1) 100%);
    background: -ms-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(97,57,1,1) 47%, rgba(255,158,0,1) 100%);
}

#container{
    background-color: white;
    width: 400px;
     margin: auto;
     margin-top: 100px;
}

En Mozilla firefox, este gradiente no se muestra del todo bien: Imagen gradiente firefox

Pero, sin embargo, tanto en Edge como en IE si se ve correctamente: Imagen gradiente edge

Alguien sabe por que ocurre esto.

1 respuesta 1

1

Parece que el gradiante se repite porque el body no ocupa el 100% de la altura de la ventana.

Podrias mover el background al html y agregar background-attachment:

html {
  background: rgb(0,0,0);
  background: -moz-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(97,57,1,1) 47%, rgba(255,158,0,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(97,57,1,1) 47%, rgba(255,158,0,1) 100%);
  background: -o-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(97,57,1,1) 47%, rgba(255,158,0,1) 100%);
  background: -ms-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(97,57,1,1) 47%, rgba(255,158,0,1) 100%);

  background-attachment: fixed;
}

1
  • Muchas gracias, problema solucionado. Commented el 5 jul. 2019 a las 11:55

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.