title: How to get an unordered list to stay in one position even when the page is too small, resized
body: <p>So my issue here is that I'm trying to keep my text in the center of the page (up a little bit).
  Problem 1: When the page is resized, the unordered list moves up and down. I want it to stay in one position (on top of the mountain-ish). It looks like this:<a href="http://gyazo.com/8c7dc29c17dab86186cf4bfde4eb1a18" rel="nofollow">http://gyazo.com/8c7dc29c17dab86186cf4bfde4eb1a18</a></p>
  
  <p>It should look like this: <a href="http://gyazo.com/644b3c072e7befffaf08d412a894bbb3" rel="nofollow">http://gyazo.com/644b3c072e7befffaf08d412a894bbb3</a>
   So for example, when the page is very large it shows the unordered list way too low, but when the page is way too high it shows the unordered list at the top. There is a middle position where i want it to stay, here: <a href="http://gyazo.com/c4c70bf8b640c6c0c1848a7085be07cf" rel="nofollow">http://gyazo.com/c4c70bf8b640c6c0c1848a7085be07cf</a>
  That is my goal here.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;html&gt;
  &lt;link rel="stylesheet" type="text/css" href="../Web_v2/css/Style.css"&gt;
  &lt;head&gt;&lt;title&gt;Company&lt;/title&gt;&lt;/head&gt;
  &lt;body&gt;
  &lt;nav&gt;
  &lt;ul&gt;
  &lt;li&gt;about us&lt;/li&gt;
  &lt;li&gt;Who we are&lt;/li&gt;
  &lt;li&gt;Contact us&lt;/li&gt;
  
  
  &lt;/ul&gt;
  
  &lt;/nav&gt;
  
  &lt;/body&gt;
  
      &lt;div id="bg"&gt;
  &lt;img src="../Web_v2/Assets/bg.jpg"&gt;
  &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>  #bg{
      position: fixed;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
  }
  #bg img{
      z-index: -1;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      min-width: 50%;
      min-height: 50%;
  }
  nav ul{
      list-style: none;
  }
  nav{
      z-index: 1;
      position: relative;
      text-align: center;
      margin-top: 400px;
      margin-left: 600px;
      font-size: 40px;
      color: white;
      font-weight: 20;
  
  }
  </code></pre>
  
  <p>JSFIDDLE:<a href="http://jsfiddle.net/5wdvk9k0/" rel="nofollow">http://jsfiddle.net/5wdvk9k0/</a></p>