title: resizable three column background image /cover layout
body: <p>Background cover and percentage width do the job scaling and aligning images for cases viewport is more horizontal than 16/9. For cases screen height is more than 0.5625 of width, outer layout parts start to eat center. In such case it might be better to crop from left and right, or may be add blank bars ontop and bottom.</p>
  
  <p>Please provide your known best practices.
  Thank you very much for participation, peace, ayo.</p>
  
  <pre><code>&lt;div class="bg"&gt;
  &lt;/div&gt;
  &lt;div class="column" id="column_left"&gt;
  &lt;/div&gt;
  &lt;div class="column" id="column_center"&gt;
  &lt;/div&gt;
  &lt;div class="column" id="column_right"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>bg {
     position: relative;
     overflow: hidden;
     height: 100%;
     width: 100%;
     max-width: 1920px;
     background: url(images/1920/bg.png) no-repeat center 0 /cover;
  }
  
  .column {
     max-width: 100%;
     opacity: 0;
     display: block;
     -webkit-transition: opacity 0.5s ease-in-out;
     -moz-transition: opacity 0.5s ease-in-out;
     transition: opacity 0.5s ease-in-out;
     position: absolute;
     height: 100%;
  
     &amp;:hover {
        opacity: 1;
        cursor: pointer;
     }
  }
  
  #column_left {
     float: left;
     left: 0;
     width: 38.85%;
     background: url(images/1920/left.png) no-repeat 0 0 /cover;
  }
  
  #column_center {
     float: left;
     left: 0;
     right: 0;
     margin-left: 26.17%;
     width: 44.69%;
     background: url(images/1920/center.png) no-repeat center 0 /cover;
  }
  
  #column_right {
     float: right;
     right: 0;
     width: 39.58%;
     background: url(images/1920/right.png) no-repeat 100% 0 /cover;
  }
  </code></pre>