Dégradés CSS avec peu de contenu

Question

Lorsque j'utilise des dégradés, avec peu de contenu, le dégradé se répète, comment puis-je empêcher cela?

http://jsfiddle.net/mcqpP/1/

Je peux essayer d'utiliser html { height: 100%; }, mais quand mon contenu nécessite le défilement ... le gradient répète

http://jsfiddle.net/mcqpP/3/

Comment puis-je résoudre ce problème

Answer 1

Pourquoi ne pas render votre dégradé comme une image 1px-wide et utiliser quelque chose comme ce qui suit:

body { 
    background-color: #fff; 
    background-image: url("images/background.jpg"); 
    background-position: center top; 
    background-repeat: repeat-x; 
} 

La définition de la valeur de répétition d'arrière-plan vous aidera à contrôler la répétition de l'arrière-plan. Dans ce cas, il serait rendu comme un groupe solide à travers le haut.

http://www.w3schools.com/css/pr_background-repeat.asp

Aussi, en utilisant une image devrait fonctionner dans tous les navigateurs, alors que les moz-gradients pourrait être problématique. La méthode d'image ci-dessus devrait rendre des résultats très prévisibles dans tous les navigateurs.

Answer 2

J'ai eu le même problème mais je me suis rendu compte que c'était logique et que j'acceptais simplement le dégradé de défilement/répétition. Vous pouvez définir une hauteur fixe, pas%, mais pour vous assurer que le dégradé ne s'est pas répété, vous devez définir la hauteur comme étant plus grande que l'écran de n'importe qui qui veut le voir. Et vous ne savez pas quelles résolutions ont les gens. Mon conseil est de simplement le laisser.

Answer 3

Vous devez définir des pourcentages sur les dégradés CSS, pas des pixels absolus. Et tant que vous vous souciez seulement des navigateurs modernes (c'est à dire que vous ne vous souciez pas de IE6), alors je vous suggère de rester à l'écart des images, le CSS fonctionne bien.

Je tire ma réponse de la réponse à cette question que je souhaite que je pourrais upvote 100 fois: How to get a vertical gradient background to work in all browsers? Cette réponse acceptée a tout ce dont vous avez besoin avec une compatibilité croisée complète.

est ici où je pris votre exemple et fait le travail: http://jsfiddle.net/HJvpf/1/

body { 
    background: -moz-linear-gradient(top, red 0%, blue 100%); 
    background: -webkit-gradient(linear, left top, left 100%, from(red), to(blue)); 
} 

Oh et votre lien 2ème jsFiddle, la raison pour laquelle il répétait le gradient est parce que vous définissez la hauteur de 100% sur html mais le gradient était au body. Vous déplacez ce height: 100%; vers le body et cela fonctionne assez bien, mais comme vous pouvez le voir dans ma solution, vous n'avez pas besoin de spécifier la hauteur du tout.

Editer: Donc vous ne voulez pas que ça se répète, mais vous ne voulez pas non plus qu'il prenne toute la hauteur. Réglez simplement repeat-x. http://www.w3schools.com/css/pr_background-repeat.asp

body { 
    background: -moz-linear-gradient(top, red, blue) repeat-x; 
    background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue)) repeat-x; 
} 

Pour la couleur de fond gradient remplir le reste de l'espace:

body { 
    background: blue -moz-linear-gradient(top, red, blue) repeat-x; 
    background: blue -webkit-gradient(linear, left top, left bottom, from(red), to(blue)) repeat-x; 
}