title: fixed bottom bar with css gradient background
body: <p>I am trying to put a bottom bar to the bottom of the screen. I have piece of CSS code which creates the bar for me. But I haven't be able to fix the bar to the bottom.</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.top_bar
  {
      display:block;
      height:18px;
      margin-bottom:10px;
      margin-top:10px;
  
      background-image: linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%);
      background-image: -o-linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%);
      background-image: -moz-linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%);
      background-image: -webkit-linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%);
      background-image: -ms-linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%);
  
      background-image: -webkit-gradient(
          linear,
          left bottom,
          right 0,
          color-stop(0.15, rgb(135,30,51)),
          color-stop(0.58, rgb(90,115,183)),
          color-stop(0.79, rgb(90,116,183))
      );
  }
  </code></pre>
  
  <p>How can I fix this to the bottom?</p>
  
  <p>I have tried this code below but I didn't work. It fixes the bar to the bottom but gradient bar shrinks...</p>
  
  <pre><code>position: fixed;
  bottom: 30px;
  </code></pre>