> Faqs > Degradado CSS en el body sin mosaico

Degradado CSS en el body sin mosaico

Una pregunta:

Estoy viendo temas de degradado y quisiera saber porque se me corta el degrade cuando sigo dandole scroll, y cuando lo intento arreglar el degrade se me hace como tipo mosaico. Es para el body.

Si alguien me puede explicar como solucionarlo o porque me sucede eso, le agradeceria!!

Un poco de código de cómo lo estás haciendo siempre es positivo para que se sepa mejor qué es lo que puede estar pasando.

Respuestas

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
148 3 13 10