Tengo este gradiente de fondo, pero no quiero que se repita la manera que lo hace para llenar la página, quiero que sea un gran gradiente que ocupa toda la página.

html:

<!DOCTYPE html>
<head>
    <meta charset = "UTF-8"/>
    <title>Home</title>
    <link rel="stylesheet" text="text/css" href="css.css">
</head>
<body>
    </body>

CSS:

p {
    font-family:"Arial Black";
    line-height:120%;
}
html {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: #70bg32;
    background-repeat:no-repeat;
    background: -webkit-linear-gradient( to left top, blue, red);
    background: -moz-linear-gradient( to left top, blue, red);
    background: -ms-linear-gradient( to left top, blue, red);
    background: -o-linear-gradient( to left top, blue, red);
    background: linear-gradient( to left top, blue, red);
}

http://jsfiddle.net/F7vf9/

InformationsquelleAutor | 2013-05-30

4 Comentarios

  1. 45

    Tener el relleno de degradado de la ventanilla, dar la <html> elemento de una altura de 100%: el violín

    html {
        height: 100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background: #70bg32;
        background-repeat:no-repeat;
        background: -webkit-linear-gradient( to left top, blue, red);
        background: -moz-linear-gradient( to left top, blue, red);
        background: -ms-linear-gradient( to left top, blue, red);
        background: -o-linear-gradient( to left top, blue, red);
        background: linear-gradient( to left top, blue, red);
    }

    Para evitar que el gradiente de la repetición allá de la parte visible de la ventanilla (suponiendo que no fue una barra de desplazamiento), reemplazar height: 100%; con min-height: 100%;.

    CSS:

    html {
        height: 100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background: #70bg32;
        background-repeat:no-repeat;
        background: -webkit-linear-gradient( to left top, blue, red);
        background: -moz-linear-gradient( to left top, blue, red);
        background: -ms-linear-gradient( to left top, blue, red);
        background: -o-linear-gradient( to left top, blue, red);
        background: linear-gradient( to left top, blue, red);
    }

    • Así que básicamente, esto se rompe cuando la página tiene contenido que es más de 100% (rollos) de lo que yo he visto… jsfiddle.net/mMBMf/173
    • covi: Cierto, pero la sustitución de height: 100%; con min-height: 100%; parece hacer el truco, al menos, en FF.
  2. 63

    A partir de hoy, ninguno de los de arriba están trabajando.
    El gradiente lineal se repite.

    A tramo de la pendiente sobre la totalidad de la página tienes que añadir esto en el css:

    body {
      background: linear-gradient(to left top, blue, red) fixed;
    }

    Eso es todo.

    • Sí, esta es la respuesta que funciona ahora
    • Esto funcionó para mí en Chrome en Ubuntu.
    • Un fondo fijo no se mueve a medida que se desplaza. Creo que el padre quería que el fondo para ocupar toda la altura de la página, no solo de la ventanilla. El min-height truco de arriba es mejor para eso.
  3. 5

    Estoy de acuerdo con a la Deriva, la adición de altura: 100% a la etiqueta html se tramo de la pendiente. También se puede quitar el background-size: cover. Esto también funciona:

    html {
      height: 100%;
    }
    body {
      width: 100%;
      background: linear-gradient(to left top, blue, red);
    }

    Usted debería ser capaz de añadir el resto de los gradientes lineales para otros navegadores sin ningún tipo de problemas. Espero que esto ayude!

  4. 0

    En caso de que alguien la necesita aún:

    Yo tengo la mía para trabajar por el aumento de la altura de la sección que tiene el gradiente de fondo por encima de 200%.

    (Yo incluida la no repetición y la cubierta, pero no tuvo ningún efecto)

    mySection {
        width: 100%;
        height: 220%; 
        background: linear-gradient(90deg, rgb(23, 156, 57) 5%, rgb(33, 211, 27) 60%)
                    center center no-repeat/ cover;
    }

Dejar respuesta

Please enter your comment!
Please enter your name here