title: Can you animate a svg "background-image"?
body: <p>I want to center a svg-image horzontal and vertical responsive to my window. So I decided to integrate the image in a div background. Now when i want to add stroke-dasharray's and animations with stroke-dashoffset to my svg it doesn't work.</p>
  
  <p>Is this posibble to animate a svg background image?</p>
  
  <p>The svg-image consists only out of many lines.
  <strong>Here my svg file (there are much more lines with only different x and y values):</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 1200"  xml:space="preserve"&gt;
  &lt;g id="Layer_1"&gt;
  
  &lt;line class="path" stroke-linecap="round" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" x1="960" y1="600" x2="2346.139" y2="-42.064"/&gt;
  
  &lt;/g&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>And here my Html and Css files:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    background-color: red;
  }
  
  .Container {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-image: url(Space.svg);
    background-size: cover;
    background-position: center;
  }
  
  
  .path {
    stroke-dasharray: 20;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;body&gt;
      &lt;div class="Container"&gt;
      &lt;/div&gt;
    &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>