javascript distorts font

Question

I've noticed the font is not displayed clear on my website. It is due to the javascript but I can not find the problem. Does anyone know what is wrong?

The border of the font is not straight. Looks something like cleartype not being set. The problem is in mu FF4 browsers. Font-weight is definitely different when the javascript is turned off (less).

Edit: I see what is the problem the Jquery background function. Does it overrule all of the css body statements? Is there a way to just add the background only to the body?

$(document).ready(function() {   

 $.fn.smartBackgroundImage = function(url){
  var t = this;
  $('<img />')
    .attr('src', url)
    .load(function(){ 
       t.each(function(){ 
          $(this).css('background', '#16171e url('+url+') right bottom no-repeat fixed');
       });
    });
   return this;
 }

var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height();
var viewportWidth = window.innerWidth ? window.innerWidth : $(window).width();
jQuery.post('/v3/ajax/portview.php', {height: viewportHeight, width: viewportWidth});

if (viewportWidth>950) {
 $('body').smartBackgroundImage('http://sionvalais.com/gfx/berge.jpg');
}

});