title: How to change the background image in a PhoneGap app?
body: <p>I'm trying to change the body background image whenever orientation changes. This seemed pretty easy at first, so I tried this code:</p>
  
  <pre><code>    function onBodyLoad() {     
          document.addEventListener("deviceready", onDeviceReady, false);
          document.addEventListener("orientationchange", onOrientationChange, true);
      }
  
      function onOrientationChange(e) {
          var orientation = (window.orientation == -90 || window.orientation == 90) ? "landscape" : "portrait";
          console.log("orientation: " + orientation);
          $("body").css("background-image", "url(images/" + orientation + ".png) no-repeat fixed center top");
      }
  
      function onDeviceReady() {
          console.log("at onDeviceReady");
          onOrientationChange();
      }
  </code></pre>
  
  <p>Every time I change the orientation, I get the correct orientation displayed in the console - meaning my event gets trigrerred properly. But the background does not change, or even initially set (even though I call the handler manually in onDeviceReady - and I see the console output that it was called). Something in the <code>$("body")</code> line just doesn't work. I tried several combinations of CSS properties and even <code>.css({"backgroundImage" : "..."})</code>, but to no avail. </p>
  
  <p>For the record, there's a landscape.png and portrait.png in an images folder, in the same directory as the html page.</p>
  
  <p>What am I missing?</p>
  
  <p>Thanks for your time.</p>