Estoy intentando hacer un fondo de página con un degradado CSS, que ocupe todo el espacio de la ventana del navegador.
Para eso he colocado el fondo en el body, con este CSS que se puede ver aquí.
body{
background: rgb(34,193,195);
background: linear-gradient(135deg, rgba(34,193,195,1) 23%, rgba(253,247,45,1) 100%);
}
Si la página tiene suficiente contenido el degradado se ve bien. Hace lo que yo quiero, que empieza arriba y termina con el color final en la parte de abajo.
Pero si la página no completa el contenido de la ventana del navegador, entonces el degradado hace un efecto feo, como un mosaico en el que se repite varias veces.
Me gustaría que el degradado comience desde arriba y termine hasta abajo, un solo degradado. He intentado colocarle 100% al height del body y no ha servido de nada.
Los estilos CSS que necesitarás son estos:
html {
height: 100%;
}
body {
height: 100%;
background: rgb(34,193,195);
background: linear-gradient(135deg, rgba(34,193,195,1) 23%, rgba(253,247,45,1) 100%);
}
Debes asignarle 100% de alto a las etiquetas <html> y <body>, al asignarle 100% de alto al <body>, éste obtiene el tamaño de la etiqueta <html>