I know I'm late to the party, but here's a more solid answer.
All you need to do is use min-height: 100%; rather than height: 100%; and your gradient background will extend the entire height of the viewport without repeating, even if the content is scrollable.
Like this:
html {
min-height: 100%;
}
body {
background: linear-gradient(#ff7241, #ff4a1f);
}