title: CSS class apply to body background
body: <p>Using css (not a inline one, but external stylesheet) how do i override the styles applied to body background only for a single page. I right now got this and this does not work</p>
  <pre><code>body{background: url(&quot;../../images/mybg.png&quot;) repeat-x scroll 0 0 #7CC2FF;height: 100%}
  body.index{background-color:#4466A7!Important}
  </code></pre>
  <p>I want the body background to change on index page only, so i used js hack as below</p>
  <pre><code>if(location.href.indexOf(&quot;index.aspx&quot;) != -1){
      $(&quot;body&quot;).addClass(&quot;index&quot;);
  }
  </code></pre>
  <p>but seems the background image is still used and has higher precedence. How do i remove the previous style to apply the overrided styles</p>
  <h3>Solution</h3>
  <p>so finally this is how it is solved</p>
  <pre><code>body{#4466A7 background: url(&quot;../../images/mybg.png&quot;) repeat-x scroll 0 0}
  body.index{background-image:none !important}
  </code></pre>