title: How can I proportionately scale an SVG background image to always be the full-width of a footer div?
body: <p>I'm having a terrible time getting an image to scale the way I'd like it to in <code>HTML &amp; CSS</code>. Hope it's possible to do this… I'm developing a site that is comprised of a <code>header, main content div and footer div</code>. All three of these divs fall within a master wrapper div. None of the divs are absolutely positioned or fixed to the browser window. In the footer div, I am trying to set a <code>SVG</code> vector image as the background as I will be also inserting text into this footer div. The <code>SVG</code> image is <code>800 x 240px</code> by default, but because SVG's are infinitely resizable, they will scale up. I would like this <code>SVG</code> image to stretch the width of the footer div proportionately. So, for example, when the browser is shrunk to <code>300px</code> wide, the image would be <code>90px</code> tall. If the browser is stretched to <code>1200px</code> wide, the image would need to scale to <code>360px</code> tall. The <code>SVG</code> should always be <code>100%</code> of the browser width and it's height should be proportionately sized.</p>
  
  <p>I am wanting the <code>footer div</code> to be at the very bottom of the browser window so that there is no white space below the background image. However, I do not want to set the <code>footer div</code> as fixed to the bottom of the browser window. I am wanting the footer to come after the main-content div on page scroll. So, on longer webpage posts, the footer div will not be visible until the page is scrolled down a bit and will then scroll into view.</p>
  
  <p>Thanks so much for any help! I can provide more information if needed. Still learning CSS &amp; HTML! :)</p>