2

Tengo el siguiente codigo ...

body{
    margin : 0;
    padding: 0;
    background-image: linear-gradient(to left top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
}

.main-container{
    margin-top: 30%;
    margin-left: auto;
    background-color: #09f;
    border-radius: 20px;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="styles.css">
        <title>Asyncronous js</title>
    </head>
    <body>
        <div class="main-container">
            
        </div>
    </body>
</html>

La idea es que el color de fondo de la pagina tenga el degradado, por que se divide por la mitad la pagina?

1
  • No entiendo cómo la respuesta a esta pregunta no está aceptada. ¿no te funcionó?
    – jachguate
    Commented el 20 jun. 2023 a las 2:15

1 respuesta 1

3

La cuestión es simple, es que la etiqueta <body> no ha ocupado toda la pantalla.

Intenta aplicarle el estilo al html junto con width y height y mira la diferencia:

html {
  background-image: linear-gradient(to left top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
  width: 100%;
  height: 100%;
}

Realizé el código de muestra para que lo puedas probar aquí mismo...

html {
    background-image: linear-gradient(to left top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
    width: 100%;
    height: 100%;
}
body {
    margin : 0;
    padding: 0;
}

.main-container{
    margin-top: 30%;
    margin-left: auto;
    background-color: #09f;
    border-radius: 20px;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="styles.css">
        <title>Asyncronous js</title>
    </head>
    <body>
        <div class="main-container">
            
        </div>
    </body>
</html>

Comenta si funcionó, Saludos!

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.