title: Keep both background and menu bar fixed in position
body: <p>I was trying to fix BOTH the menu bar and the background's positions.</p>
  
  <p>So I add this code to the body to fix the background's position:</p>
  
  <pre><code>&lt;body style ="width: 100%; background-image: url(images/bkgd3_1260_black.jpg); background-attachment:fixed; background-size: cover; background-position:center;&gt;
      &lt;div id="menu-bar"&gt; xxxxx
      &lt;/div&gt;
      &lt;---other content---&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And I put a code under head tag for fixing the menu bar's position, i.e.:</p>
  
  <pre><code>&lt;head&gt;
      &lt;style type="text/css"&gt;
          #menu-bar {
              position: fixed;
              left: 0px;
              top: 0px;
              width: 1000px;
              height: 25px;
              z-index: 100;
              background-color: #040404;
              font-family: Calibri;
              font-size: 16px;
              font-style: normal;
              text-transform: none;
              text-decoration:none;
              color: rgb(231,231,231);
              line-height: normal;
              letter-spacing: normal;
              text-align: left;
              word-spacing: normal;
              display: table-row;
              background-repeat: no-repeat;
              border-bottom-width: thin;
              border-bottom-style: solid;
              border-left-style: none;
              border-right-style: none;
              border-top-style: none;
              border-bottom-color: rgb(204,255,38);
          }
      &lt;/style&gt;
  &lt;head&gt;
  </code></pre>
  
  <p>However, the result is: the background is fixed, but the menu bar is not. when I scroll down, the menu bar just disappear. I actually want it to stay at the very top.</p>
  
  <p>any suggestions?</p>