title: Change background dependent upon arriving URL
body: <p>Hi and hope someone can help.</p>
  
  <p>I have a live site and also a development site where I test out new code before deployment but basically they have the same content e.g. </p>
  
  <ul>
  <li>Live = www.myserver.com/live/index.html</li>
  <li>Development = www.myserver.com/development/index.html</li>
  </ul>
  
  <p>Is there a way of setting the (say) CSS background property dependent upon the url that has been used to arrive at the site. </p>
  
  <p>My current CSS =</p>
  
  <pre><code>body {
      background: #eff;
      /* change this to background: #ccc; if on development site */
      margin:25px;
  }
  </code></pre>
  
  <p>Why?
  Well, I frequently find myself uploading or testing new code on the wrong site.</p>
  
  <p>Not a big issue I know but useful if I could have a visual clue as to which site I'm testing.</p>
  
  <p>My thanks for your interest.</p>
  
  <p><strong>Now Solved</strong> Thanks for input from @Adam Buchanan Smith, @Dekel and Mr Green.
  I sort of used @Dekel's logic but changed it to jQuery along the following lines:</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function(){
  // Set background dependent upon url i.e. www.myserver.com/cab or www.myserver.com/cab2
  // cab2 is the development site, cab the live site
  // Also change text in div id="live" from 'Live Site' to 'Development Site' if arrives at by cab2   
      if (document.location.pathname.indexOf('cab2') &gt; -1){
      $('body').css({"background":"#BFFFDF"});
      document.getElementById('live').innerHTML = "Development Site";
      } else {
          $('body').css({"background":"#efffff"});
          document.getElementById('live').innerHTML = "Live Site";
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>My thanks to all for your interest!</p>