web-dev-qa-db-fra.com

Fond dégradé fixe avec css

J'aimerais que ma page ait un fond dégradé qui coule de haut en bas. Je veux que l'arrière-plan se comporte comme une image fixe dans la mesure où le dégradé s'étend du haut de la fenêtre de navigation actuelle vers le bas et ressemble à ce que vous faites défiler de haut en bas de la page. En d'autres termes, il ne se répète pas lorsque vous faites défiler. Il reste fixe en place.

Donc ce que je veux c'est ceci:

enter image description here

et après avoir défilé vers le bas, vous voyez ceci enter image description here

Notez que le dégradé a exactement la même apparence en bas de la page qu'en haut. Il passe du jaune plein au rouge plein.

Le mieux que je puisse réellement faire est que le dégradé couvre tout le contenu de la page au lieu de la partie visible, comme ceci:

enter image description here

et le fond ressemble à ceci: enter image description here

Notez ici que le dégradé s'étend sur toute la longueur du contenu, pas seulement ce qui est actuellement visible. Donc, en haut de la page, vous voyez principalement du jaune et en bas de la page, vous voyez principalement du rouge.

Je suppose que je pourrais résoudre ce problème en utilisant une image étirée dans le plan y et répétée dans le plan x, mais je préfère ne pas le faire, car si possible, car l'étirement de l'image peut conduire à un gradient d'aspect polyédrique et non granulaire. Cela peut-il être fait dynamiquement avec seulement CSS?

cssbackgroundgradient
30
d512

Si vous souhaitez le faire en utilisant des dégradés CSS3, essayez d'ajouter ce qui suit au sélecteur.

Par exemple, si vous appliquez vos dégradés à #background, puis ajoutez ceci après le dégradé CSS. Important : Vous devez l'ajouter après les propriétés d'arrière-plan.

background-attachment: fixed;

w3schools.org: propriété CSS background-attachment

Votre code entier pourrait ressembler à:

#background {
  background: #1e5799;
  background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
  background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
  background: -o-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
  background: -ms-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
  background: linear-gradient(to bottom,  #1e5799 0%,#7db9e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
  background-attachment: fixed;
}
70
ScottA
html {
  height: 100%;
  /* fallback */
  background-color: #1a82f7;
  background: url(images/linear_bg_2.png);
  background-repeat: repeat-x;

  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));

  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #2F2727, #1a82f7);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #2F2727, #1a82f7);

  /* IE 10 */
  background: -ms-linear-gradient(top, #2F2727, #1a82f7);

  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #2F2727, #1a82f7);
}

http://css-tricks.com/examples/CSS3Gradient/
http://css-tricks.com/css3-gradients/

Selon les navigateurs que vous prenez en charge, vous pouvez ou non souhaiter une solution de secours d'image. Sinon, vous souhaiterez peut-être inclure les filter et -ms-filter syntaxe à la place pour permettre IE 6-8. Même sans cela ou une image, il reviendra au background-color

2
Michael Lawton