title: Replicating the effect of CSS "background-image" - alternative approaches?
body: <p>I'm seeking a way to implement a full-size responsive background image like the one that can be achieved using the CSS below, except that I require also that my background be animatable (able to be faded using Jquery).</p>
  
  <p>Here's the CSS that gives me the desired effect on my landing page: </p>
  
  <pre><code>body {
    margin: 0;
    background-image: url(images/lovelyphoto.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #464646;
    /* bg color while image loads */
  }
  </code></pre>
  
  <p>I need the background-image then to fade when the visitor clicks a "take a tour" button -- achieved using Jquery, which also renders new html into the DOM, including a new background image to be faded in. But when I apply the following Jquery, it's not able to achieve a smooth transition, I believe because the background-image CSS property is not animatable (see: w3schools, "Animatable Properties": <a href="https://www.w3schools.com/cssref/css_animatable.asp" rel="nofollow noreferrer">https://www.w3schools.com/cssref/css_animatable.asp</a>): </p>
  
  <pre><code>$(document).ready(function() {
    $(".button").click(function() {
      $("body").fadeOut(1200, function() {
        $("body").html('&lt;body&gt;/* new html goes here */ &lt;/body&gt;').fadeIn(1200);
        setTimeout(fadeToPageThree, 6 * 1000); // sets timer for pg2 to pg3 transition
      }); // closes first page fadeOut
    }); // closes click handler
  });
  </code></pre>
  
  <p>The solution that I've been attempting is to get rid of the css background-image and instead place my background image as an  tag inside the html. This solves my fade problem, because Jquery can handle a fade on this img element, but it doesn't give me the responsive effects that the CSS applied to the body above does, no matter what css styles on width, height, min-width, etc that I attempt to apply to the img.</p>
  
  <p>Any insights would be appreciated! </p>