title: meteor js iron router: apply CSS change whenever route changes
body: <p>I have homepage, contact page, and several other product related pages in my app.</p>
  
  <p>The goal is to apply a background image to ONLY specifc routes: <code>/homepage</code> and <code>/contact</code>.  If user navigates away from either route, apply some css change.</p>
  
  <p>I am hacking this together now with a helper on my homepage, like so: </p>
  
  <pre><code>Template.homepage.rendered = function () {
  
      var route = Router.current();
  
      if ( route.path == '/' ) {
  
          document.body.className = "showBackgroundImage";
  
      }
  };
  </code></pre>
  
  <p>Partial win here, since this will activate the css, but I need to deactivate when route changes.  I have also tried the following within my <code>router.js</code>: </p>
  
  <pre><code>this.route('homepage', {
      path: '/', 
      onAfterAction: function  (argument) {
         // add a class name to body
         document.body.className = "showBackgroundImage";
      }
    });
  </code></pre>
  
  <p>And CSS in the background standard: </p>
  
  <pre><code>.showBackgroundImage { 
    background: url(bgImage.jpg) no-repeat center center fixed; 
  }
  </code></pre>