Le fond dégradé CSS3 défini sur le corps ne s’étire pas mais se répète à la place?

ok disons que le contenu à l’intérieur du totalise 300px haut.

Si je définis l’arrière-plan de mon utilisant -webkit-gradient ou -moz-linear-gradient

Ensuite, je maximise ma fenêtre (ou juste plus de 300 pixels), le dégradé aura exactement 300 pixels de hauteur (la hauteur du contenu) et il suffit de répéter pour remplir le rest de la fenêtre.

Je suppose que ce n’est pas un bogue puisque c’est la même chose dans Webkit et Gecko.

Mais y a-t-il un moyen de faire en sorte que l’étirement du dégradé remplisse la fenêtre au lieu de répéter?

Appliquez le CSS suivant:

 html { height: 100%; } body { height: 100%; margin: 0; background-repeat: no-repeat; background-attachment: fixed; } 

Edit: margin: 0; ajoutée margin: 0; déclaration de corps par commentaires ( Martin ).

Edit: Ajout background-attachment: fixed; déclaration de corps par commentaires ( Johe Green ).

Concernant une réponse précédente, définir html et body to height: 100% ne semble pas fonctionner si le contenu doit faire défiler. L’ajout d’un fond fixed semble résoudre ce problème – pas need for height: 100%;

Par exemple:

 body { background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed; } 

Voici ce que j’ai fait pour résoudre ce problème … il affichera le dégradé pour toute la longueur du contenu, puis reviendra simplement à la couleur de fond (normalement la dernière couleur du dégradé).

  html { background: #cbccc8; } body { background-repeat: no-repeat; background: #cbccc8; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)); background: -moz-linear-gradient(top, #fff, #cbccc8); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cbccc8'); } 
  

Hello world!

Définir le html { height: 100%} peut causer des dégâts avec IE. Voici un exemple (png). Mais tu sais ce qui marche bien? Il suffit de définir votre arrière-plan sur la .

 html { -moz-linear-gradient(top, #fff, #000); /* etc. */ } 

L’arrière-plan s’étend jusqu’au bas et aucun comportement de défilement étrange ne se produit. Vous pouvez ignorer toutes les autres corrections. Et ceci est largement soutenu. Je n’ai pas trouvé de navigateur qui ne vous permette pas d’appliquer un arrière-plan à la balise HTML. C’est parfaitement valide CSS et a été pendant un certain temps. 🙂

Il y a beaucoup d’informations partielles sur cette page, mais pas complète. Voici ce que je fais:

  1. Créez un dégradé ici: http://www.colorzilla.com/gradient-editor/
  2. Définissez le dégradé sur HTML au lieu de BODY.
  3. Fixer le fond sur HTML avec “background-attachment: fixed;”
  4. Désactiver les marges supérieure et inférieure sur BODY
  5. (facultatif) Je crée généralement un

    lequel je mets tout mon contenu

Voici un exemple:

 html { background: #a9e4f7; /* Old browsers */ background: -moz-linear-gradient(-45deg, #a9e4f7 0%, #0fb4e7 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, #a9e4f7 0%,#0fb4e7 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, #a9e4f7 0%,#0fb4e7 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, #a9e4f7 0%,#0fb4e7 100%); /* IE10+ */ background: linear-gradient(135deg, #a9e4f7 0%,#0fb4e7 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ background-attachment: fixed; } body { margin-top: 0px; margin-bottom: 0px; } /* OPTIONAL: div to store content. Many of these atsortingbutes should be changed to suit your needs */ #container { width: 800px; margin: auto; background-color: white; border: 1px solid gray; border-top: none; border-bottom: none; box-shadow: 3px 0px 20px #333; padding: 10px; } 

Cela a été testé avec IE, Chrome et Firefox sur des pages de différentes tailles et besoins de défilement.

Je sais que je suis en retard à la fête, mais voici une réponse plus solide.

Tout ce que vous devez faire est d’utiliser min-height: 100%; plutôt que height: 100%; et votre arrière-plan dégradé étendra toute la hauteur de la fenêtre d’affichage sans répéter, même si le contenu est déroulant.

Comme ça:

 html { min-height: 100%; } body { background: linear-gradient(#ff7241, #ff4a1f); } 

Sale; peut-être pourriez-vous simplement append une hauteur minimale: 100%; au HTML, et les balises de corps? Cela ou au moins définir une couleur d’arrière-plan par défaut qui est également la couleur du dégradé de fin.

J’ai eu du mal à trouver les réponses ici pour travailler.
J’ai trouvé que cela fonctionnait mieux pour corriger un div pleine taille dans le corps, lui donner un index z négatif et y attacher le dégradé.

   

Voici un exemple complet https://gist.github.com/morefromalan/8a4f6db5ce43b5240a6ddab611afdc55

 background: #13486d; /* for non-css3 browsers */ background-image: -webkit-gradient(linear, left top, left bottom, from(#9dc3c3), to(#13486d)); background: -moz-linear-gradient(top, #9dc3c3, #13486d); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc3c3', endColorstr='#13486d'); background-repeat:no-repeat; 

c’est ce que j’ai fait:

 html, body { height:100%; background: #014298 ; } body { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c9cf2), color-stop(100%,#014298)); background: -moz-linear-gradient(top, rgba(92,156,242,1) 0%, rgba(1,66,152,1) 100%); background: -o-linear-gradient(top, #5c9cf2 0%,#014298 100%); /*I added these codes*/ margin:0; float:left; position:relative; width:100%; } 

avant de faire flotter le corps, il y avait un espace sur le dessus, et il montrait la couleur de fond du HTML. Si je supprime le bgcolor de html, lorsque je fais défiler vers le bas, le dégradé est coupé. J’ai donc flotté le corps et mis sa position à relative et la largeur à 100%. il a travaillé sur safari, chrome, firefox, opéra, internet expl .. oh attendez. : P

Qu’en pensez-vous?

J’ai utilisé ce code CSS et cela a fonctionné pour moi:

 html { height: 100%; } body { background: #f6cb4a; /* Old browsers */ background: -moz-linear-gradient(top, #f2b600 0%, #f6cb4a 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2b600), color-stop(100%,#f6cb4a)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* IE10+ */ background: linear-gradient(top, #f2b600 0%,#f6cb4a 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2b600', endColorstr='#f6cb4a',GradientType=0 ); /* IE6-9 */ height: 100%; background-repeat: no-repeat; background-attachment: fixed; width: 100%; background-position: 0px 0px; } 

Une information connexe est que vous pouvez créer vos propres dégradés sur http://www.colorzilla.com/gradient-editor/

/ Sten

au lieu de 100%, j’ajoute juste un peu de pixxel obtenu maintenant et cela fonctionne pour toute la page sans espace:

 html { height: 1420px; } body { height: 1400px; margin: 0; background-repeat: no-repeat; }