CSS3 градиент не прокручивается должным образом

Question

Вот мой сайт: Ссылка

Я немного осмотрелся, но не смог найти то, что искал.Я пытаюсь использовать CSS-градиент для фона моего сайта, но размер его не изменяется должным образом.Вместо этого он будет повторяться, когда вам придется прокручивать.Даже с фоновым повторением, установленным на нет, у меня все еще есть эта проблема.Кто-нибудь знает, в чем моя проблема?Вот мой 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 делает то, что вы хотите, но затем вы устанавливаете background: и перезаписываете это значение.Замените его на background-image и все готово.

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

Просто установите цвет фона на #ccc, и проблема должна исчезнуть. Остальная часть вашей страницы будет просто #ccc. Это ограничение градиентов + background-size. Теоретически, background-size:cover должен исправить это правильно, но, похоже, он этого не делает из-за взаимодействия различных спецификаций.

background-attachment:fixed фактически исправляет фон, поэтому он никогда не прокручивается, что решает проблему, но добавляет этот визуальный артефакт.

Answer 4

Нужно сделать по порядку

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

Это должно сработать