title: Horizontal scroll with a full background image
body: <p>I want a fullwidth background (with horizontal scroll) for a project that I'm working on at the moment. </p>
  
  <p>I've added the following code to set the background:</p>
  
  <pre><code>.street {
      position: absolute;
      top: 0;
      left: 50%;
      background: url('../img/street.svg') no-repeat left;
      background-size: cover;
      width: 100%;
      height: 100%;
      z-index: -2;
  }
  </code></pre>
  
  <p>That works, but then I've had a new problem, because of the background-size: cover the image only shows a part of it. </p>
  
  <p>The user has to scroll horizontally, so that he or she can see the whole street image. My question is: How van I fix that? (I've already searched on the internet and maybe it is a really simple solution, so sorry for asking :))</p>
  
  <p><a href="https://i.stack.imgur.com/3g3xG.png" rel="nofollow noreferrer">What I have so far</a>
  Thanks!</p>