title: CSS Gradient not working properly in Internet Explorer 11
body: <p>The issue is that the CSS gradient I am using as part of the background is repeating after every 120 pixels instead of taking up the whole page length. After careful experimentation, I believe that I have figured out that the issue is that Internet Explorer 11 thinks that the page length is only 120px. I am not getting this problem with Edge, Firefox or Chrome (though I was told that Chrome does have the same problem but the CSS is coded in such a way that it is ignoring the perceived page height).</p>
  
  <p>Is there a way I can modify the CSS to tell Internet Explorer that the page length is not 120px?</p>
  
  <p>Relevant data:</p>
  
  <p>The existing code relating to the gradient is:</p>
  
  <pre><code>body{background: #fdb6b4; /* Old browsers */ 
  background: -moz-linear-gradient(top, #ffdadd 0%, #fdb6b4 100%); /* FF3.6-15 */ 
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffdadd), color-stop(100%,#fdb6b4)); /* Chrome4-9,Safari4-5 */ 
  background: -webkit-linear-gradient(top, #ffdadd 0%,#fdb6b4 100%); /* Chrome10-25,Safari5.1-6 */ 
  background: -o-linear-gradient(top, #ffdadd 0%,#fdb6b4 100%); /* Opera 11.10-11.50 */ 
  background: -ms-linear-gradient(top, #ffdadd 0%,#fdb6b4 100%); /* IE10 preview */ 
  background: linear-gradient(to bottom, #ffdadd 0%,#fdb6b4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdadd', endColorstr='#fdb6b4',GradientType=0 ); /* IE6-9 */}
  </code></pre>
  
  <p>Link to the blog in question to see exactly what the issue is:
  <a href="http://www.http://madinskincareland.com" rel="nofollow noreferrer">http://www.http://madinskincareland.com</a></p>
  
  <p>above: how IE11 renders, below: how Firefox 51.0.1 renders (all other tested browsers including available mobile devices render properly)</p>
  
  <p><img src="https://i.stack.imgur.com/0DuWc.jpg" alt="image"></p>