CODEWITHSUNDEEP
cssbackground
Deeptechtons
Deeptechtons

Reputation: 11125

CSS class apply to body background

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}

Upvotes: 1

Views: 21888

Answers (3)

dbrin
dbrin

Reputation: 15673

body.index{background-image: none}

Upvotes: 1

Shailender Arora
Shailender Arora

Reputation: 7778

you can do this very easily through css like you need all pages with red background and index page with yellow background see the mentioned below example with css & HTML code :- 

body {
background:red;    
}

#index {
background:yellow;   
}


<body id="index"> (!--for yellow color index page--!) 
adfadfasf    
</body>

<body> (!--for red color all pages--!) 
adfadfasf    
</body>

or see the fiddle:- http://jsfiddle.net/n6y4q/

Upvotes: 0

SpliFF
SpliFF

Reputation: 38956

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

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

Upvotes: 2

Related Questions