Getting a div's background image with jQuery. Is there an inbuilt method to strip out the url() portion?

Question

I am using this code to get the background image of a div.

var bgImage = $('#content').css('backgroundImage');

This is returning url%28http://example.com/images/layout/content-trans.png%29

I know you can do element.height() to get an element's height without px appended (parseInt() also works), so I was wondering if there was a similiar method for jQuery to get the actual background image minus the url() meta data.

I suppose I could use a regular expression, something like /url\((.*)\)/, but I'd rather know first if there is an built-in way.

Answer 1

url() is part of the value of background-image, so I guess you need to use regex replace.

var bgImage = $('#content').css('background-image').replace(/^url|[\(\)]/g, ''); 

Ref: http://groups.google.com/group/jquery-en/browse_thread/thread/d866997cb206b35f