title: CSS3 background image doesn't vertically stretch
body: <p>I'm having a problem with vertically stretching the background image all the way down to the bottom. I'm aware that I can set <code>height</code> or <code>min-height</code> on the container class <code>.view-index</code> but don't want to set height property manually as I want the image to respond to the browser size when users resize the browser.</p>
  
  <p>Whilst the background image stretches down the bottom, I don't want it to cover the second image, <code>.view-extra img</code>.</p>
  
  <p>Example of what I would like to achieve: <a href="https://mdbootstrap.com/live/_MDB/index/docs/page-layouts/intro-transparent.html" rel="nofollow noreferrer">https://mdbootstrap.com/live/_MDB/index/docs/page-layouts/intro-transparent.html</a></p>
  
  <p>Here is my <a href="https://jsfiddle.net/julysfx/9ut3wtwf/" rel="nofollow noreferrer">JSFiddle</a> (updated)</p>