title: How to make background image fade in with css when page loads?
body: <p>Hello I am trying to fade in the background image into my website by using all css if possible. When users visit the home page I would like for the image to fade in. I am having issues doing so unless I have to add jquery or javascript to do so. Here is my code: </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Paradox Entertainment&lt;/title&gt;
  
  &lt;meta charset="utf-8" /&gt;
  &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8" /&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
  &lt;style type="text/css"&gt;
  
  
  
  body {
      margin:0;
      font-family:arial,helvetica,sans-serif;
  
      background-image:url("images/2_petski.jpg");
      background-position: center;
      background-repeat: no-repeat;
      background-color:#000000;
      color: #ffffff;
      padding: 350px;
  
  
  }
  
  ul { 
          list-style: none 
  
   }
  
  
  
  &lt;/style&gt; 
  
  &lt;/head&gt;
  
  
  &lt;body&gt;
  
  
  
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thank you in advance if I can get any sort of resource or code help. </p>