linear-gradient doesn't work when applied to body
<p>When I apply a linear gradient to the body in CSS like below </p>

<pre><code>body 
{
background: linear-gradient(#10416b, black); 
}
</code></pre>

<p>It doesn't apply it to the entire web page, instead what happens is it is applied to the first half of the page, and then starts over from blue to black for the second half, (#10416b is a blue color). Adding in height:100%; to the body doesn't change anything. </p>

<p>I fixed the problem by doing the below in CSS </p>

<pre><code>.background {
  background: linear-gradient(#10416b, black);
  height: 100%; 

} 
</code></pre>

<p>and this in HTML </p>

<pre><code>&lt;!DOCTYPE html&gt; 
&lt;html class="background"&gt; 
 // lots of unrelated code in between the tags  
&lt;/html&gt; 
</code></pre>

<p>But I still don't understand why setting the background with the linear gradient in the body didn't work. If somebody could explain this to me that would be great. </p>