title: CSS Fade in background image
body: <p>The background of my page has a default background color, and a picture.</p>
  
  <p>Here is my code :</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body background="https://www.switchbacktravel.com/sites/default/files/images/articles/Hiking%20photo.jpg" class="default-background" style="background-position: center; background-repeat: no-repeat; background-size: cover;"&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.default-background {
    background-color: #17181a;
  }
  </code></pre>
  
  <p>When the picture is heavy, or the user's internet connection slow, the default background color would appear first, and the picture second, when the picture is ready to load.</p>
  
  <p>In that case, I want the picture to fade in smoothly, not brutally as it is the case now.</p>
  
  <p>Here is a fiddle : <a href="https://jsfiddle.net/cg45ygat/" rel="nofollow noreferrer">https://jsfiddle.net/cg45ygat/</a></p>
  
  <p>My goal is to achieve the result (more or less) of WeTransfer background picture display : www.wetransfer.com</p>
  
  <p>Is there a CSS animation way of doing this ? </p>