title: SVG with fixed height and scaling width
body: <p>I currently have a <code>div</code> in my home page, serving as the first section of it. It has a <code>background-image</code> which is a SVG file.</p>
  
  <p>What I'd like, is for the background to not move vertically when scaling it. Have it with fixed height, but scale horizontally.</p>
  
  <p>Currently, I can get it to have 2 different behaviours, neither the one I want.</p>
  
  <p><a href="https://media.giphy.com/media/7XoOfBbfAASvUhRXRM/giphy.gif" rel="nofollow noreferrer"><img src="https://media.giphy.com/media/7XoOfBbfAASvUhRXRM/giphy.gif" alt="1"></a>
  <a href="https://i.stack.imgur.com/mMtUc.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mMtUc.gif" alt="2"></a></p>
  
  <p>The first gif is closest to what I want, giving the <code>svg</code> element a <code>height</code> attribute and using <code>preserveAspectRatio=none</code>, but then the circles inside don't preserve their aspect ratio.</p>
  
  <p>The second example could also work, but if the svg were clipped to the bottom of the div instead of the top. But I don't know how to make it scale "upwards" instead of downwards.</p>