When hovering over a link, I am using jQuery to change the background of the body. This functionality works flawlessly in Firefox and Internet Explorer, but unfortunately, Chrome (v37) does not reflect the background color change.
I attempted to troubleshoot in the JavaScript console in Chrome, however, the background remains unchanged even there.
An example illustrating the issue: The background doesn't update entirely until the window is resized. On my live website, the background does not change at all.
$("a").mouseover(function (){
var bg = $("body").css(["background-image","background-repeat","background-attachment","background-size","background-position"]);
var bgimage = bg["background-image"];
bg["background-image"]=bgimage.replace(/http.+jpg/,"http://fc01.deviantart.net/fs17/f/2007/129/7/4/Stock_032__by_enchanted_stock.jpg");
$("body").css({"background-image":bg["background-image"],"background-repeat":bg["background-repeat"],"background-attachment":bg["background-attachment"],"background-size":bg["background-size"],"background-position":bg["background-position"]});
});
Please note: It is vital to both read and write all utilized background properties; otherwise, certain properties will be lost when solely modifying "background-image" with jQuery.