title: CSS Background image scale to fit screen height
body: <p>I'm trying to add two images as a background of the page. The first background is fine and fits to the screen width &amp; height but the second one is not scaling to fit the screen height. Kindly help me with this. Its CSS code is given below.</p>
  
  <pre><code>body
  {
  margin:0;
  padding:0;  
  background-image:url('../images/bgs/bg.jpg');
  background-repeat:no-repeat;
  background-attachment:fixed;
  margin: 0;
  background-size:contain;
  padding: 0;
  height: 100%;
  width: 100%;
  position:relative;
  bottom:0px;
  top:0px;
  margin-top:0px;
  margin-bottom:0px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  max-height:100%;
  max-width:100%;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bgs/bg.jpg', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bgs/bg.jpg', sizingMethod='scale')";
  font-family:Trebuchet MS, Arial, 'Helvetica', sans-serif;
  font-size:1em;
  }
  
  .taste
  {
  background-image:url('../images/bgs/bg2.jpg');
  background-repeat:no-repeat;
  background-attachment:fixed;
  margin: 0;
  background-size:contain;
  padding: 0;
  height: 100%;
  width: 100%;
  position:relative;
  bottom:0px;
  top:0px;
  margin-top:0px;
  margin-bottom:0px;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  max-height:100%;
  max-width:100%;
  background-position:center;
  }
  </code></pre>
  
  <p>And the relevant HTML is here</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt; 
  &lt;meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
  &lt;meta name="HandheldFriendly" content="true"&gt;
  &lt;meta name="keywords" content="" /&gt;
  &lt;meta name="author" content="Aamir Ali Bangash | ATOM Digital" /&gt;
  &lt;meta name="description" content="" /&gt;
  &lt;title&gt;Sweet!&lt;/title&gt;
  &lt;link href="css/style.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="js/jquery-scrolltofixed.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="js/smooth-scroll.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function() {
  // Dock the header to the top of the window when scrolled past the banner.
  // This is the default behavior.        
  $('.header').scrollToFixed();
  });
  $(function() {
  $('a[href*=#]:not([href=#])').click(function() {
  if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') &amp;&amp; location.hostname == this.hostname) {
  var target = $(this.hash);
  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
  if (target.length) {
  $('html,body').animate({
  scrollTop: target.offset().top
  }, 1000);
  return false;
  }
  }
  });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="banner"&gt;
  &lt;div class="main" align="center"&gt;&lt;a href="main.html"&gt;&lt;img src="images/logo1.png" style="display:block;" border="0"&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="header"&gt;
  &lt;div class="main"&gt;&lt;span class="title"&gt;
  &lt;ul class="nav"&gt;
  &lt;li&gt;&lt;a href="main.html" class="scroll" data-speed="2000" data-easing="easeInOutCubic"&gt;THE SWEET! TASTE&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt; | &lt;/li&gt;
  &lt;li&gt;&lt;a href="#shaka" class="scroll" data-speed="2000" data-easing="easeInOutCubic"&gt;THE SWEET! SHAKA&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt; | &lt;/li&gt;
  &lt;li&gt;&lt;a href="#match" class="scroll" data-speed="2000" data-easing="easeInOutCubic"&gt;THE SWEET! MATCH&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt; | &lt;/li&gt;
  &lt;li&gt;&lt;a href="#hub" class="scroll" data-speed="2000" data-easing="easeInOutCubic"&gt;THE SWEET! HUB&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/span&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="taste" id="taste"&gt;
  &lt;div class="taste-div"&gt;
  Everyone is loving the sweet taste, easy drinking wines packed with flavour, fruitiness and fun.&lt;/td&gt;
  &lt;p&gt;&lt;h3&gt;sweet! White 75cl&lt;/h3&gt;
  &lt;strong&gt;Description!&lt;/strong&gt; Sweet peach and apricot fruit flavours with a hint of lychee and tangy citrus. Ripe, fruity and very refreshing. &lt;br /&gt;
  &lt;strong&gt;Origin!&lt;/strong&gt; Western Cape, South Africa&lt;br /&gt;
  &lt;strong&gt;Grape variety!&lt;/strong&gt; Blend of Chenin Blanc, Semillon and Muscat d’Alexandrie&lt;br /&gt;
  &lt;strong&gt;Alcohol!&lt;/strong&gt; 12% by volume&lt;/p&gt;
  &lt;p&gt;
  &lt;h3&gt;sweet! Red 75cl&lt;/h3&gt;
  &lt;strong&gt;Description!&lt;/strong&gt; Sweet red and black berry flavours with a hint of tropical fruit and mocha spice. Smooth, easy-drinking and moreish. 
  Origin! Western Cape, South Africa&lt;br /&gt;
  &lt;strong&gt;Grape variety!&lt;/strong&gt; Blend of Merlot, Pinotage and Muscat d’Alexandrie&lt;br /&gt;
  &lt;strong&gt;Alcohol!&lt;/strong&gt; 13.5% by volume&lt;/p&gt;
  &lt;/div&gt;
  &lt;div style="text-align:center;padding-bottom:10px;"&gt;&lt;a href="#shaka"&gt;
  &lt;img src="images/lb/bottom.png" border="0" /&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Body Background is fine but I need to scale the taste background to fit all of the screen's height.</p>
  
  <p>Thanks</p>