Question

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

body{background: url("../../images/mybg.png") repeat-x scroll 0 0 #7CC2FF;height: 100%}
body.index{background-color:#4466A7!Important}

I want the body background to change on index page only, so i used js hack as below

if(location.href.indexOf("index.aspx") != -1){
    $("body").addClass("index");
}

but seems the background image is still used and has higher precedence. How do i remove the previous style to apply the overrided styles

Solution

so finally this is how it is solved

body{#4466A7 background: url("../../images/mybg.png") repeat-x scroll 0 0}
body.index{background-image:none !important}

Answer 1

body.index{background-color:#4466A7 !important}

Note the space between the color and !important and capitalisation used on important.