title: Inline style for background image stretch
body: <p>Within a div, I am trying to stretch a header image both horizontally (width) and vertically (height). Seems the width stretch can be solved by using:</p>
  
  <pre><code>background-size: cover;
  background-size: 100% 100%\9; /* IE8 */
  </code></pre>
  
  <p>But for the height (vertical stretch), is there any way to do this? What is the best practice to do this, acceptable across browsers?</p>
  
  <pre><code>&lt;div style="background-image: url(&amp;quot;http://ibuild.ph/eascongress/sites/default/files/logos-banners/header-1-revised.png&amp;quot;); background-size: cover; height: 135px;"&gt;
  &lt;div style="float: left;"&gt;&lt;a href="/eascongress/index.php"&gt;&lt;img style="width: 441px; height: 117px;" src="/eascongress/sites/default/files/logos-banners/EAS-Logo-Theme-Header-Banner.png" alt="EAS Congress 2015 logo"&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;div style="float: right; padding-right:17px"&gt;&lt;img style="width: 513px; height: 117px;" src="/eascongress/sites/default/files/logos-banners/Global-Local-Benefits-Theme-Header-Banner.png" alt=""&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Link to the demo/dev site <a href="http://ibuild.ph/eascongress/index.php" rel="nofollow noreferrer">here</a></p>
  
  <p><img src="https://i.stack.imgur.com/PcfGX.jpg" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/9xJ7O.jpg" alt="enter image description here"></p>