CSS3 gradient not scrolling properly

Question

Here is my site here: Link

I looked around a little, but could not find what I was looking for. I am trying to use a CSS gradient for the background of my site, but it does not change correctly. Instead, it will repeat when you have to scroll. Even with the repeating background not repeating, I still have this problem. Does anyone know what my problem is? Here is my css.

html{ height:100%; } body {font: 14px/normal Tahoma, Arial, Helvetica, sans-serif; height: 100%; min-height:100%; margin:0; background-repeat:no-repeat; background-attachment:fixed; background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#ccc)); background-image: -moz-linear-gradient(top, #000, #ccc); background-image: -o-linear-gradient(top, #000, #ccc); background-image: linear-gradient(top, #000, #ccc); } 

Answer 1

background-attachment:fixed does what you want, but next time you set background: and overwrite this value. Replace it with background-image and everything will be ready.

Answer 2

 background:url(/_pix/bg.png) repeat,-webkit-gradient(linear,left top,left bottom,color-stop(0,#C8AA86),color-stop(1,#664927)); background:url(/_pix/bg.png) repeat,-webkit-linear-gradient(top,#C8AA86 0%,#664927 100%); background:url(/_pix/bg.png) repeat,-moz-linear-gradient(top,#C8AA86 0%,#664927 100%); background:url(/_pix/bg.png) repeat,-ms-linear-gradient(top,#C8AA86 0%,#664927 100%); background:url(/_pix/bg.png) repeat,-o-linear-gradient(top,#C8AA86 0%,#664927 100%); background:url(/_pix/bg.png) repeat,linear-gradient(top,#C8AA86 0%,#664927 100%); background-attachment:fixed; 

Answer 3

Just set the background color to #ccc and the problem should go away. The rest of your page will be #ccc. This is a gradient limitation + background-size . Theoretically, background-size:cover should fix this correctly, but it does not seem to be related to the interaction of various specifications.

background-attachment:fixed actually captures the background, so it never scrolls, which solves the problem, but adds this visual artifact.

Answer 4

You need to do ok

  background-repeat:no-repeat; background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#ccc)); background-attachment:fixed; 

This should work