title: IE11 wont background-size: cover
body: <p>I have a div #service_wrap it has an image that should cover 100%width of the page it works fine in firefox,chrome and edge. But IE 11 it centers the image and does not cover the div <br><br>
  What is the IE equivalent of background-size: cover;</p>
  
  <p>css<br></p>
  
  <pre><code>#service_wrap{
  padding:0;
  margin:0;
  width:100%;
  height:750px;
  max-height:750px;
  display:table;
  background: url(../images/service_header.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }
  </code></pre>
  
  <p>html<br></p>
  
  <pre><code>&lt;div id="service_wrap" &gt;
  
  &lt;div id="service_top" &gt;
  &lt;h1&gt;WE WORK CLOSELY WITH OUR PARTNERS TO GET YOU THE BEST SERVICE.&lt;/h1&gt;
  &lt;h2&gt;Click on a service below to learn more about how we partner with each one.&lt;/h2&gt;
  &lt;/div&gt;&lt;!--service_top--&gt;
  
  &lt;div id="service_bottom" &gt;
  &lt;div class="services_holder"&gt;
  &lt;a href=""&gt;&lt;div class="service1"&gt;&lt;/div&gt;&lt;/a&gt;&lt;!--service1--&gt;
  &lt;a href=""&gt;&lt;div class="service2"&gt;&lt;/div&gt;&lt;/a&gt;&lt;!--service2--&gt;
  &lt;a href=""&gt;&lt;div class="service3"&gt;&lt;/div&gt;&lt;/a&gt;&lt;!--service3--&gt;
  &lt;a href=""&gt;&lt;div class="service4"&gt;&lt;/div&gt;&lt;/a&gt;&lt;!--service4--&gt;
  &lt;a href=""&gt;&lt;div class="service5"&gt;&lt;/div&gt;&lt;/a&gt;&lt;!--service5--&gt;
  &lt;a href=""&gt;&lt;div class="service6"&gt;&lt;/div&gt;&lt;/a&gt;&lt;!--service4--&gt;
  &lt;a href=""&gt;&lt;div class="service7"&gt;&lt;/div&gt;&lt;/a&gt;&lt;!--service5--&gt;
  &lt;/div&gt;&lt;!--services_holder--&gt;
  &lt;/div&gt;&lt;!--service_bottom--&gt;
  
  &lt;/div&gt;&lt;!--service_wrap--&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/fYRIy.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/fYRIy.jpg" alt="firefox"></a></p>
  
  <p><a href="https://i.stack.imgur.com/8bNDP.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/8bNDP.jpg" alt="IE11"></a></p>
  
  <p>If you insert the code below into a webpage on IE11 it does not use the full width
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  
  &lt;title&gt;this is a title&lt;/title&gt;
  
  &lt;link rel="stylesheet" href="css/partners.css" type="text/css" /&gt;
  &lt;link rel="stylesheet" href="css/style.css" type="text/css" /&gt;
  
  &lt;style&gt;
  
  #service_wrap{
  
  background: url(http://test.finelinewow.com/images/partner_header.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  } 
  &lt;/style&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
  
  
  
  
  
  
  
  
  &lt;!----------------------------------------------------------------service----------------------------------------------------------------&gt;   
  
  &lt;div id="service_wrap" &gt;
  
  
  
  &lt;div id="service_top" &gt;
  &lt;h1&gt;WE WORK CLOSELY WITH OUR PARTNERS TO GET YOU THE BEST SERVICE.&lt;/h1&gt;
  &lt;h2&gt;Click on a service below to learn more about how we partner with each one.&lt;/h2&gt;
  
  
  &lt;/div&gt;&lt;!--service_top--&gt;
  
  
  &lt;div id="service_bottom" &gt;
  &lt;div class="services_holder"&gt;
  &lt;a href="#liberty_towing"&gt;&lt;div class="service1"&gt;&lt;/div&gt;&lt;/a&gt;&lt;!--service1--&gt;
  &lt;a href="#auto_palace"&gt;&lt;div class="service2"&gt;&lt;/div&gt;&lt;/a&gt;&lt;!--service2--&gt;
  &lt;a href="#discount_auto"&gt;&lt;div class="service3"&gt;&lt;/div&gt;&lt;/a&gt;&lt;!--service3--&gt;
  &lt;a href="#speedy_car"&gt;&lt;div class="service4"&gt;&lt;/div&gt;&lt;/a&gt;&lt;!--service4--&gt;
  &lt;a href="#solid_insurance"&gt;&lt;div class="service5"&gt;&lt;/div&gt;&lt;/a&gt;&lt;!--service5--&gt;
  &lt;a href="#sevan_auto"&gt;&lt;div class="service6"&gt;&lt;/div&gt;&lt;/a&gt;&lt;!--service4--&gt;
  &lt;a href="#gray_gables"&gt;&lt;div class="service7"&gt;&lt;/div&gt;&lt;/a&gt;&lt;!--service5--&gt;
  &lt;/div&gt;&lt;!--services_holder--&gt;
  &lt;/div&gt;&lt;!--service_bottom--&gt;
  
  
  
  
  
  &lt;/div&gt;&lt;!--service_wrap--&gt;
  
  &lt;!----------------------------------------------------------------/service----------------------------------------------------------------&gt;  
  
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>