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

430

ok dis le contenu à l'intérieur des <body>totaux 300px de haut.

Si je définis l'arrière-plan de mon <body>utilisation -webkit-gradientou-moz-linear-gradient

Ensuite, je maximise ma fenêtre (ou je la rend juste plus haute que 300px), le dégradé sera exactement de 300px (la hauteur du contenu) et je répète juste 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 le webkit et le gecko.

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

css gradient JD Isaacks
la source

Réponses:

718

Appliquez le CSS suivant:

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

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

Edit: ajouté background-attachment: fixed;à la déclaration du corps par les commentaires ( Johe Green ).

Bryan Downing
la source
4
J'ai aussi découvert que je devais ajouter margin:0;le bodyou bien je suis un écart en bas de ma page.
Martin
8
Dans Chrome et Safari, le corps {hauteur: 100%} entraîne la sortie de la page (mais pas le dégradé) hors de la fenêtre d'affichage.
thSoft
13
J'ai dû ajouter une pièce jointe en arrière-plan: fixe; au corps pour se débarrasser de l'écart inférieur (Webkit).
j7nn7k
4
Définir un arrière-plan pour le corps, puis la hauteur de la balise html à 100% fait des choses étranges dans Internet Explorer. Voici un exemple (png).
Justin Force
21
Assurez - vous que background-repeatet background-attachmentvenir après vos backgroundrègles. Sinon, l'arrière-plan risque de se répéter.
kellen
159

En ce qui concerne une réponse précédente, la mise htmlet bodyà height: 100%ne semble pas fonctionner si les besoins de contenu de défilement. L'ajout fixedà l'arrière-plan semble résoudre ce problème - nonneed for height: 100%;

Par exemple:

body {
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed;
}
Développer l'extrait

Joshua Rudd
la source
5
Cela a fonctionné pour moi dans tous les navigateurs que j'ai testés (Chrome [Mac], Safari [Mac], Firefox [Mac / Win7], IE9 [Win7] et Opera [Mac]) sans l'effet secondaire de la barre de défilement de la "hauteur: 100%" Solution. Merci!
pipwerks
7
Une note pour ceux qui utilisent Sass / Compass. Vous ne pouvez pas définir "fixe" directement dans le mixin, donc pour ajouter fixe, vous ajoutez la propriétébackground-attachment: fixed
Kyle Mathews
2
Si vous voulez que l'arrière-plan remplisse la fenêtre ou le contenu (selon la valeur la plus élevée), utilisez min-height:100%(dans les navigateurs compatibles)
cjk
J'ai pu exécuter le code suivant à l'aide de Compass: @include background (linear-gradient (top, red 0%, blue 100%) fixed);
mcranston18
Comment ajouter une troisième couleur?
sbaden
17

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 sans se répéter, même si le contenu peut défiler.

Comme ça:

html {
    min-height: 100%;
}

body {
    background: linear-gradient(#ff7241, #ff4a1f);
}
Ricardo Zea
la source
Sauf si vous devez définir la hauteur html à 100%, par exemple si vous avez besoin d'un pied de page collant
apieceofbart
15

Voici ce que j'ai fait pour résoudre ce problème ... il affichera le dégradé sur toute la longueur du contenu, puis reviendra simplement à 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>
Développer l'extrait

J'ai testé cela dans FireFox 3.6, Safari 4 et Chrome, je conserve la couleur d'arrière-plan dans le corps de tous les navigateurs qui, pour une raison quelconque, ne prennent pas en charge le style de la balise HTML.

John Sanford
la source
13

Le réglage html { height: 100%}peut faire des ravages avec IE. Voici un exemple (png). Mais vous savez ce qui fonctionne bien? Définissez simplement votre arrière-plan sur la <html>balise.

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

L'arrière-plan s'étend vers le bas et aucun comportement de défilement étrange ne se produit. Vous pouvez ignorer toutes les autres corrections. Et cela est largement soutenu. Je n'ai pas trouvé de navigateur qui ne vous permet pas d'appliquer un arrière-plan à la balise html. C'est un CSS parfaitement valide et cela fait longtemps. :)

Justin Force
la source
1
@Lynda Ce n'est pas une rétroaction très utile. Pourriez-vous fournir un cas où cela ne fonctionne pas?
Justin Force
Désolé d'être vague. Je ne sais pas pourquoi cela ne fonctionne pas. Vous pouvez ajouter un dégradé htmlmais il s'arrête à mi-chemin de la page dans mon cas. L'ajout background-attachment:fixedrésout le problème. J'ai vu cela se produire sur plusieurs sites, mais je n'ai pas pu en trouver la cause.
L84
Le point de cette solution est qu'elle a fonctionné sur tous les navigateurs (en 2012, soit dit en passant). Mais vous n'indiquez toujours pas de quel navigateur vous parlez. Si vous rencontrez toujours des problèmes, essayez d'ajouter html, body { height: 100%; }.
Justin Force
Vrai. Cela se produit dans Firefox et Chrome (n'a pas testé dans d'autres navigateurs) et j'ai essayé la hauteur et divers autres paramètres sans aucune chance (sauf en arrière-plan). Eh bien, ce n'est pas grave et j'espère que votre réponse fonctionne toujours pour la plupart. =>
L84
Il faut encore tromper sans répétition et fixe.
MarsAndBack
12

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

  1. Créez un dégradé ici: http://www.colorzilla.com/gradient-editor/
  2. Définissez le gradient sur HTML au lieu de BODY.
  3. Correction de l'arrière-plan sur HTML avec "background-attachment: fixed;"
  4. Désactiver les marges supérieure et inférieure de BODY
  5. (facultatif) Je crée généralement un fichier dans <DIV id='container'>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 différentes tailles et besoins de défilement.

Rick Smith
la source
1
Génial! J'utilisais colorzilla et la réponse principale ne fonctionnait pas pour moi. Celui-ci l'a fait. Je vous remercie! :)
Pouliche
Pourquoi préférez-vous le faire sur HTML, pas sur BODY?
sashaikevich
@sashaikevich Grande question. Je n'ai pas à peine regardé cette réponse en 5 ans donc je ne m'en souviens pas du tout. La raison pour laquelle je l'ai fait ne s'applique peut-être pas encore à toutes les mises à jour du navigateur. Si vous avez tout déplacé vers le corps, je serais curieux de savoir si cela fonctionnait de la même manière.
Rick Smith
@RickSmith Nope, j'ai stylé html. Mais, je viens de déplacer les règles à appliquer au corps pour vérifier, et cela n'a fait aucune différence. C'était peut-être un vieux navigateur ...
sashaikevich
4

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

subv3rsion
la source
1
L'arrière-plan par défaut défini comme couleur de dégradé de fin serait une excellente solution si le dégradé s'arrêtait, mais il ne s'arrête pas simplement qu'il se répète, de sorte que l'arrière-plan par défaut ne serait visible que si le dégradé n'est pas pris en charge.
JD Isaacks
2

J'ai eu du mal à obtenir les réponses ici pour travailler.
J'ai trouvé qu'il fonctionnait mieux pour fixer une div pleine grandeur dans le corps, lui donner un index z négatif et y attacher 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

morefromalan
la source
0

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 sur http://www.colorzilla.com/gradient-editor/

/ Sten

Netsi1964
la source
-1 
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;
Joe
la source
1
Veuillez ajouter quelques explications sur les aspects clés de votre solution.
Rachcha
-1

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 de html. si je supprime le bgcolor de html, quand je défile vers le bas, le dégradé est coupé. j'ai donc flotté le corps et réglé sa position sur relative et la largeur sur 100%. ça a fonctionné sur safari, chrome, firefox, opéra, internet expl .. oh attendez. : P

Qu'en pensez-vous?

grizzy
la source
-4

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

html {     
height: 1420px; } 
body {     
height: 1400px;     
margin: 0;     
background-repeat: no-repeat; }
PONCEUSE
la source
3
qu'en est-il des pages avec> 1420 px de hauteur?
veritas