web-dev-qa-db-fra.com

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

ok dites que le contenu à l'intérieur du <body> totalise 300px de haut.

Si je règle l'arrière-plan de mon <body> en utilisant -webkit-gradient ou -moz-linear-gradient

Ensuite, je maximise ma fenêtre (ou je la fais juste plus haute que 300 pixels), le dégradé aura exactement 300 pixels (la hauteur du contenu) et répète simplement pour remplir le reste de la fenêtre.

Je suppose que ce n'est pas un bug car c'est la même chose dans webkit et gecko.

Mais existe-t-il un moyen d’étirer le dégradé pour remplir la fenêtre au lieu de se répéter?

csscss3gradient
401
JD Isaacks

Appliquez le CSS suivant:

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

Edit: Ajout de margin: 0; à la déclaration de corps par commentaires ( Martin ).

Edit: Ajouté background-attachment: fixed; à la déclaration de corps selon les commentaires ( Johe Green ).

666
Bryan Downing

En ce qui concerne une réponse précédente, régler html et body sur height: 100% ne semble pas fonctionner si le contenu doit défiler. L'ajout de fixed à l'arrière-plan semble résoudre ce problème - pas de need for height: 100%;

Par exemple.:

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

Voici ce que j'ai fait pour résoudre ce problème ... il montrera le dégradé sur toute la longueur du contenu, puis retombera simplement sur la couleur d'arrière-plan (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');
   }
<body>
  <h1>Hello world!</h1>
</body>

J'ai testé cela dans FireFox 3.6, Safari 4 et Chrome. Je garde la couleur de fond dans le corps de tout navigateur qui, pour une raison quelconque, ne prend pas en charge le style de la balise HTML.

15
John Sanford

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

Tout ce que vous avez à 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 sans répétition, même si le contenu est susceptible de défilement.

Comme ça:

html {
    min-height: 100%;
}

body {
    background: linear-gradient(#ff7241, #ff4a1f);
}
13
Ricardo Zea

Régler html { height: 100%} peut causer des dégâts avec IE. Voici un exemple (png). Mais vous savez ce qui fonctionne bien? Il suffit de définir votre arrière-plan sur la balise <html>.

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

L'arrière-plan s'étend jusqu'au bas et aucun comportement étrange de défilement ne se produit. Vous pouvez ignorer tous les autres correctifs. 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. :)

13
Justin Force

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. Correction de l'arrière-plan sur HTML avec "background-attachment: fixed;"
  4. Désactive les marges supérieure et inférieure de BODY
  5. (facultatif) Je crée généralement un <DIV id='container'> dans 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 attributes 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 tailles et de besoins de défilement variés.

12
Rick Smith

Sale; peut-être pourriez-vous simplement ajouter une hauteur minimale: 100%; les balises HTML et body? Cela ou du moins définir une couleur d'arrière-plan par défaut qui est également la couleur du dégradé final.

3
subv3rsion

J'ai eu du mal à obtenir les réponses ici pour travailler.
J’ai trouvé qu’il était plus pratique de corriger un div en taille réelle dans le corps, de lui attribuer un indice z négatif et de lui associer le dégradé.

<style>

  .fixed-background {
    position:fixed;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1000;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .blue-gradient-bg {
    background: #134659; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(top, #134659 , #2b7692); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom, #134659, #2b7692); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(top, #134659, #2b7692); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom, #134659 , #2b7692); /* Standard syntax */
  }

  body{
    margin: 0;
  }

</style>

<body >
 <div class="fixed-background blue-gradient-bg"></div>
</body>

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

2
morefromalan

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 grands dégradés à l'adresse http://www.colorzilla.com/gradient-editor/

/ Sten

0
Netsi1964