title: Html: scrollable div with fixed background
body: <p>I'm trying to get a full-screen image background with a scrollable div on its center, so I wrote this code</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Bio&lt;/title&gt;
  &lt;link href="../css/layout-base.css" rel="stylesheet"&gt;
  &lt;script type="text/javascript" src="../jquery/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(window).ready(function(){
          var background = $('#background');
          var scrollable = $('#scrollable-container');
          var halfWhite = $('#halfWhite');
          var halfBlack = $('#halfBlack');
          /* calcolo dimensione finestra */
          var maxWidth = $(window).width();
          var maxHeight = $(window).height();
  
          /* settaggio dimensioni immagine sfondo */
          background.css("height",maxHeight);
          background.css("width",maxWidth);
  
          scrollable.css("height",maxHeight);
  
          /* settaggio dimensioni riempimento sfondo */
          halfWhite.css("height",maxHeight);
          halfWhite.css("width",maxWidth/2);
          halfBlack.css("height",maxHeight);
          halfBlack.css("width",maxWidth/2);
      });
      $(window).resize(function(){
          var background = $('#background');
          var scrollable = $('#scrollable-container');
          var halfWhite = $('#halfWhite');
          var halfBlack = $('#halfBlack');
          /* calcolo dimensione finestra */
          var maxWidth = $(window).width();
          var maxHeight = $(window).height();
  
          /* settaggio dimensioni immagine sfondo */
          background.css("height",maxHeight);
          background.css("width",maxWidth);
  
          scrollable.css("height",maxHeight);
  
          /* settaggio dimensioni riempimento sfondo */
          halfWhite.css("height",maxHeight);
          halfWhite.css("width",maxWidth/2);
          halfBlack.css("height",maxHeight);
          halfBlack.css("width",maxWidth/2);
      });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="background"&gt;
      &lt;div id="halfWhite"&gt;&lt;/div&gt;
      &lt;div id="halfBlack"&gt;&lt;/div&gt;
      &lt;div id="scrollable-container"&gt;
          &lt;div class="content"&gt;
              &lt;div id="text"&gt;&lt;/div&gt;
              &lt;a href="#" class="menu" id="home" target="_self"&gt;&lt;img src="../media/index/tasto1.png"/&gt;&lt;/a&gt;
              &lt;a href="#" class="menu" id="events" target="_self"&gt;&lt;img src="../media/index/tasto2.png"/&gt;&lt;/a&gt;
              &lt;a href="#" class="menu" id="gallery" target="_self"&gt;&lt;img src="../media/index/tasto3.png"/&gt;&lt;/a&gt;
              &lt;a href="#" class="menu" id="disco" target="_self"&gt;&lt;img src="../media/index/tasto4.png"/&gt;&lt;/a&gt;
          &lt;/div&gt;&lt;!--div content --&gt;
      &lt;/div&gt;
  &lt;/div&gt;&lt;!-- div background --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>With the relative css:</p>
  
  <pre><code>body{
  overflow:hidden;
  margin:0!important;
  }
  #background{
  background-image:url(../media/index/back.png);
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  }
   #halfWhite{
  position:relative;
  background-color: white;
  z-index: -10;
  float: left;
  }
  #halfBlack{
  position:relative;
  background-color: black;
  z-index: -10;
  float: right;
  }
  #scrollable-container{margin-left: 15%;margin-right: 15%;background-    color:rgba(0,0,0,0.00);}
  .content{
  height:98%;
  position: relative;
  top:1%;
  padding-left: 15%;
  padding-right: 15%;
  box-shadow: -10px 2px 15px #dedede,10px -2px  15px #dedede;
  -moz-box-shadow:-10px 2px 15px #dedede,10px -2px  15px #dedede;
  -webkit-box-shadow:-10px 2px 15px #dedede,10px -2px  15px #dedede;
  background-color:rgba(255,255,255,0.8);
  }
  #text{position:absolute;top:10%;width:100%;height:100000px;width:70%}
  .menu{
  width:15%;
  -webkit-transition: all 0.4s linear;
  -moz-transition: all 0.4s linear;
  -o-transition: all 0.4s linear;
  -ms-transition: all 0.4s linear;
  transition: all 0.4s linear;
  }
  .menu:hover{
  -webkit-transform: scale(0.85,0.85);
  -moz-transform: scale(0.85,0.85);
  -o-transform: scale(0.85,0.85);
  -ms-transform: scale(0.85,0.85);
  transform: scale(0.85,0.85);
  }
  .menu img{width:100%}
  #home{position:absolute;top:0px;left:0px;}
  #events{position:absolute;top:0px;right:0px;}
  #gallery{position:absolute;bottom:0px;left:0px;}
  #disco{position:absolute;bottom:0px;right:0px;}
  </code></pre>
  
  <p>I want the #text div to scroll while the rest of the page has to stay fixed (so that the background is always on the same position), but when I add overflow property to the parent divs there are strange side effects (for example, the .content div goes to the very bottom of the page).
  How can I achieve this behaviour? Is this the correct way to make this kind of layout?</p>