CSS渐变在多个框中重新启动

这里有一个指向我的JSFIDLE的链接。

渐变在看起来的每个框或元素中一遍又一遍地重新开始。我不确定我的CSS有什么问题。谢谢你的帮助

body {
background: linear-gradient(#1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* W3C */
}

---

我相信这是一个简单的解决方案，很抱歉CSS初学者提出了这个问题。

您需要在样式中添加

html，body{height:100%；}

，以强制浏览器以全高呈现html父标记。目前它只渲染了大约100px的高度，身体背景正在重复

---

参见此图。

添加背景重复：无重复；&背景附件：固定；