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 inbuilt way.

Thank you!

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

Answer 2

Something like:

var imgUrl = 'http://example.com/images/layout/content-trans.png%29';
var i = imgUrl.lastIndexOf("/");
string filename = imgUrl.substring(i,img.length - 1);
alert(filename);

In pure JS terms

Answer 3

how about this easy solution:

bgImage.slice(bgImage.lastIndexOf('/')+1, bgImage.length - 3)