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.