Fix for setting CSS background image using jQuery

Yesterday I got into a very silly problem. I need to change background image of the div element using jQuery. And to change the background image, I was using jQuery CSS method which takes key as CSS attribute and value as value of that attribute.

So, to change the background image I was using below code.

$('#dvBackGround').css('background','path/to/image.jpg');

From initial look, I don't see any problem with the code but it was not working. The background image was not getting set. Even firebug showing that no CSS background properties is set. I was wondering what was the problem with the code. The code seems correct to me but it wasn't working. After 5-10 minutes, I realized the my mistake. The CSS background property takes value of the image path within url() keyword.

So the correct jQuery code is,

$('#dvBackGround').css('background','url(path/to/image.jpg)');

See result below.



Feel free to contact me for any help related to jQuery, I will gladly help you.