Fond dégradé fixe avec css

Question

Je voudrais que mon arrière-plan soit dégradé de haut en bas. Je souhaite que l'arrière-plan agisse comme une image fixe, car le dégradé s'étend du haut de la fenêtre du navigateur actuel vers le bas et a la même apparence que lorsque vous faites défiler la page vers le haut ou vers le bas. En d'autres termes, il ne se répète pas lorsque vous faites défiler. Il reste fixé en place.

donc ce que je veux est ceci:

et après avoir fait défiler vers le bas vous voyez ce

Notez que le gradient ressemble exactement au bas de la page il le fait en haut. Il va du jaune au rouge.

Le meilleur que je suis réellement en mesure de faire est d'avoir le gradient enjambent la totalité du contenu de la page au lieu de simplement la partie visible, comme ceci:

et le fond ressemble à ceci:

Notez ici que le dégradé couvre toute la longueur du contenu, pas seulement ce qui est actuellement visible. Ainsi, en haut de la page, vous voyez principalement du jaune et au bas de la page, vous voyez principalement du rouge. Je suppose que je pourrais résoudre ceci en utilisant une image étirée dans le plan y et répétée dans le plan x mais je préférerais ne pas le faire puisque si possible l'étirement de l'image pourrait conduire à un dégradé non granulaire. Cela peut-il être fait dynamiquement avec juste CSS?

Answer 1

Si vous souhaitez faire cela en utilisant les dégradés CSS3, essayez d'ajouter ce qui suit au sélecteur. Par exemple, si vous appliquez vos dégradés à #background, ajoutez-les après le dégradé CSS. Important: Vous devez ajouter ceci après les propriétés d'arrière-plan.

background-attachment: fixed;

w3schools.org: CSS background-attachment property

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; 
} 

Answer 2

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 ce que les navigateurs vous aider, vous pouvez ou ne voulez pas un repli d'image. Si ce n'est pas le cas, vous pouvez inclure la syntaxe filter et -ms-filter à la place pour autoriser IE 6-8. Même sans cela ou une image, il se repliera sur le background-color

Answer 3

Une autre façon de le faire (avec l'image réelle):

body { 
    background-attachment: local; // or 'fixed' here 
    background-image: url(fancy.jpg); 
    background-size: 100% 100%; 
    overflow:auto; 
    box-sizing:border-box; 
    width:100%; 
    height:100%; 
    margin:0; 
}