title: 100% height CSS for iOS iPad
body: <p>(I have been reading up on the topic of iOS mobile safari and how it displays some positioning and css styles differently.) </p>
  
  <p>I am still trying to solve the issue which is having the background content to take up the entire display height on the iPad, I was hoping to achieve the same style as I have for the desktop and when I shrink the browser to tablet view. Instead the content just has a 100% width.  </p>
  
  <ul>
  <li>The background content has it's own tags. I am using media queries so that on mobile there is no background content and temporarily I have turned tablet display to none. If I turn display to block, I find I can shrink the browser and the background video or image takes up the entire height matching the top-section but On iOS it does not. - </li>
  </ul>
  
  <p>Any comments or advice will be much appreciated. </p>
  
  <p>meta data: </p>
  
  <pre><code>&lt;meta charset="UTF-8" /&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt; 
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; 
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes" /&gt;
  &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
  &lt;meta name="apple-mobile-web-app-status-bar-style" content="black"&gt;
  </code></pre>
  
  <p>HTML: </p>
  
  <pre><code>  &lt;div class="top-section"&gt;
    &lt;video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted"   volume="0"&gt; 
  &lt;source src="videos/screentest1.webmhd.webm" type="video/webm"&gt; 
  &lt;source src="videos/screentest1.mp4" type="video/mp4"&gt; Video not supported 
  &lt;/video&gt;   
  &lt;div id="video_pattern"&gt;
            &lt;/video&gt; 
    &lt;/DIV&gt; 
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>#video_background { 
  display: none; 
  position: absolute; 
  bottom: 0px; 
  right: 0px; 
  min-width: 100%; 
  min-height: 100%; 
  z-index: -1000; 
  overflow: hidden; }
  
  #video_pattern { background: -webkit-linear-gradient(rgba(255,119,85,0.89),  rgba(255,92,106,0.82) ); /* For Safari */
  background: -o-linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82)); /* Standard syntax */;
   position: absolute; left: 0px; top: 0px; width: 100%; min-height: 100%; z-index: 1; }
  
  .top-section{
  background-size: cover;
  background-repeat: repeat;
  position: relative;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: 2;
  text-align: center;
    padding: 0;}
  </code></pre>