title: Why is my linear gradient moving when the browser window is resized?
body: <p>I am using a gradient which goes from transparent to white. When the page is resized the gradient changes visually.
  I mean this as in the transparent part of the gradient moves up and down whenever the page is squished or expanded.</p>
  
  <p><strong>Why is this happening and is there any way I can fix it?</strong></p>
  
  <p>I have tested this in several browsers and am unable to find an answer on the internet.
  I am utilizing bootstrap as well in my code, but I do not think that it is affecting this in any way.</p>
  
  <p>I entered two or three sets of ipsum lorem into the "TEXT GOES HERE" to simulate a largeish website.</p>
  
  <p>Heres a  <a href="http://jsfiddle.net//r8gz9fm4/" rel="nofollow">jsfiddle</a> simulating the problem, move around the size of the page to make it bigger or smaller(on jsfiddle you have to make it really small to see the effect). </p>
  
  <p><em>Note</em> : I am student and the last time i was working with HTML/CSS was over a year ago, so im a bit rusty.
  If you need more information please comment. Thanks</p>
  
  <p>CSS</p>
  
  <pre><code> body {
  background: url(http://www.sweetideascandy.com/wp-content/themes/sweetideas/images/bg-body.jpg);
  }
  #logo {
  float:right;
  width: 103%;
  height: auto;
  width: auto\9;
  /* ie8 */
  position: relative;
  overflow:visible;
  }
  #centerdiv {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 88%, rgba(255, 255, 255, 0) 100%);
  /* w3c */    
  } 
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
  &lt;!-- This is the Master All encompasing div --&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-sm-3"&gt;&lt;/div&gt;
  
      &lt;!-- This is the Center div --&gt;
      &lt;div id="centerdiv" class="col-sm-6"&gt;
  
          &lt;!-- Sweet Ideas Logo --&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-12"&gt;
                  &lt;img id="logo" src="http://www.sweetideascandy.com/wp-content/uploads/2014/03/logo.png" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- --/Sweet Ideas Logo--- --&gt;
  
          &lt;div&gt;
              &lt;p&gt; Text Goes here. &lt;/p&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;div class="col-sm-3"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p></p>