Overriding body background with JQuery?

Question

$('body').css('background-color', 'blue'); does not work for me.

There seems to be other matched CSS rules that prevail on the page.

Is there a way I can force this CSS to work? This also doesn't work when I try background-image...

With Google Chrome's CSS explorer there are three different matched CSS rules for body.

I don't understand how this works and why this above JQuery isn't working.

Feed me knowledge please!

[EDIT]

The answer is perfect for overriding CSS! Thanks

Note: Clear cache and browsing data from the beginning of time, it helps ;)

Answer 1

If you want to force this style to be applied in case there are conflicts then use !important after the style.

$(function(){
    $('body').css('background-color', 'blue !important');
});

Answer 2

Using !important will push the priority of this style:

$('body').css('background-color', 'blue !important');

However it might be worth posting up more of your source code, as there is often a better solution than using !important