background-image stretch to fit beyond viewport

I have a page where I want a full-screen background image. This works fine when the the body fits within the viewport, I have html { height: 100%; } and body { min-height: 100%; padding-top: 70px; ... background-size: cover; } (the top padding is for a page header). The issue arises when the page becomes larger than the viewport. The body stretches to the correct height, however the background attachment never grows larger than the size of the viewport. Here is a sample fiddle [https://jsfiddle.net/xdsgek6t/]. In the live version there is also an image overlay, but in the fiddle you can easily see the line where the radial gradient ends, even though I've told it to cover the body, which in this fiddle is 3000px tall due to a child element.

html { height: 100%; box-sizing: border-box; }
body {
  overflow-y: scroll;
  padding-bottom: 30px;
  padding-top: 70px;
  background-color: #363636;
  min-height: 100%;
	background-color: #1976D2;
	background-image: radial-gradient( circle at top right, #64B5F6 0%, #1976D2 90% );
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: right 70px;
	background-size: cover;
  margin: 0;
  box-sizing: border-box;
}
div.something { height: 3000px; width: 10px; }
header { position: absolute; width: 100%; top: 0; left: 0; height: 70px; z-index: 500; background-color: #ddd; }

<body>
  <header></header>
  <div class="something"></div>
</body>

This ends up looking really strange when the page grows a tiny bit larger, and is really evident on mobile.

Solution

Remove height: 100%; from html and it will extend. And if you need min-height: 100% on body, you can use min-height: 100vh instead, and that will not rely on height: 100% on html

html { box-sizing: border-box; }
body {
  overflow-y: scroll;
  padding-bottom: 30px;
  padding-top: 70px;
  background-color: #363636;
  min-height: 100vh;
	background-color: #1976D2;
	background-image: radial-gradient( circle at top right, #64B5F6 0%, #1976D2 90% );
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: right 70px;
	background-size: cover;
  margin: 0;
  box-sizing: border-box;
}
div.something { height: 3000px; width: 10px; }
header { position: absolute; width: 100%; top: 0; left: 0; height: 70px; z-index: 500; background-color: #ddd; }

<header></header>
<div class="something"></div>