Mon css gradient n'est pas extensible, il répète

body{
padding:0;
margin:0;
font:normal 12px/16px Arial, Helvetica, sans-serif;
color:#383634;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.18, rgb(74,12,107)),
color-stop(0.87, rgb(102,153,102))
);
background: -moz-linear-gradient(top, #4a0c6b 0%, #669966 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4a0c6b),         color-stop(100%,#669966)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4a0c6b 0%,#669966 100%); /*    Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4a0c6b 0%,#669966 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #4a0c6b 0%,#669966 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a0c6b', endColorstr='#669966',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #4a0c6b 0%,#669966 100%); /* W3C */

Il passe la plupart de la descente, puis répète

InformationsquelleAutor Mike | 2011-08-07
  1. 54

    Votre code d'origine: http://jsfiddle.net/ecKR4/7/

    Si vous voulez que le dégradé s'étendent sur toute la hauteur de la page:

    html {
    min-height: 100%
}

    Avec peu de contenu: http://jsfiddle.net/ecKR4/1/

    Avec beaucoup de contenu: http://jsfiddle.net/ecKR4/2/

    Si vous voulez que le dégradé être fixe et le plus haut de la fenêtre d'affichage:

    html {
    height: 100%
}
body {
    background-attachment: fixed
}

    Avec peu de contenu: http://jsfiddle.net/ecKR4/3/

    Avec beaucoup de contenu: http://jsfiddle.net/ecKR4/4/

    Si vous voulez que le dégradé soit le plus haut de la fenêtre d'affichage, puis la couleur de fond:

    html {
    height: 100%
}
body {
    background-repeat: no-repeat;
    background-color: #669966; /* ending colour of gradient */
}

    Avec peu de contenu: http://jsfiddle.net/ecKR4/5/

    Avec beaucoup de contenu: http://jsfiddle.net/ecKR4/6/

    • Vous êtes mon héros!
    • +1 pour le "min-height". J'avais été à l'aide de "hauteur" et ne pouvait pas le faire fonctionner sur tous les navigateurs. Merci!
    • brillamment simple
    • Vous êtes un gentleman et un érudit. Il semble étrange que les html serait jamais ne PAS être à 100% par défaut.
    • Cela m'a vraiment aidé! Souhaite que je pourrais upvote plus d'une fois.
    InformationsquelleAutor thirtydot