Esto lo tienes respondido en esta otra FAQ: ¿Cómo hacer un fondo con degradado con CSS en todo el body que ocupe la página entera?
De todos modos, te resumo un par de soluciones de configuración de los degradados CSS que espero que puedan adaptarse a tu problema.
Usar fixed en background
lo que tienes que hacer es tan fácil como añadir a tu degradado la opción "fixed".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
background: rgb(144, 34, 195);
background: linear-gradient(35deg, rgb(195, 34, 55) 23%, rgb(68, 3, 106) 100%) fixed;
color: #fff;
}
</style>
<title>Document</title>
</head>
<body>
<h1>Test de degradado CSS</h1>
<p>Hola!! este ejemplo de degradado ocupa la página completa, gracias al atributo "fixed"</p>
</body>
</html>
Usar height 100% en el elemento html
Otra opción que tienes es colocarle un alto a tu elemento HTML a 100%.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html {
min-height: 100%;
}
body{
background: rgb(144, 34, 195);
background: linear-gradient(35deg, rgb(195, 34, 55) 23%, rgb(68, 3, 106) 100%);
color: #fff;
}
</style>
<title>Document</title>
</head>
<body>
<h1>Test de degradado CSS</h1>
<p>Hola!! este ejemplo de degradado ocupa la página completa, gracias a haberle puesto un height mínimo del 100% en el elemento HTML.</p>
</body>
</html>
Cualquiera de estas opciones es válida.
Norberto
238
6
20
15