如何使它如此线性渐变不重复

Question

我有以下css：

header {
  background-color: #5A775A;
  position: relative;
  top: -25px;
  width: 100%;
  height: 10%;
  color: white;
}

h1 {
  position: relative;
  left: 60px;
  top: 20px;
}

html {
  /* IE10 Consumer Preview */ 
  background-image: -ms-linear-gradient(bottom, #000000 0%, #5A775A 100%);

  /* Mozilla Firefox */ 
  background-image: -moz-linear-gradient(bottom, #000000 0%, #5A775A 100%);

  /* Opera */ 
  background-image: -o-linear-gradient(bottom, #000000 0%, #5A775A 100%);

  /* Webkit (Safari/Chrome 10) */ 
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #000000), color-stop(1, #5A775A));

  /* Webkit (Chrome 11+) */ 
  background-image: -webkit-linear-gradient(bottom, #000000 0%, #5A775A 100%);

  /* W3C Markup, IE10 Release Preview */ 
  background-image: linear-gradient(to top, #000000 0%, #5A775A 100%);
}

产生以下设计：

正如您所见，渐变正在重复。如何制作它不会垂直重复，它只是整个页面的一个长梯度？

编辑：

尝试使用

background-size: 100% 100%;
background-repeat: no-repeat;

产地：

这个问题是它没有跨越整个屏幕。

Answer 1

只需使用

background-size: 100% 100%;
background-attachment: fixed;

Answer 2

background-repeat: no-repeat;添加：background-size: cover;