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

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

This is returning url%28.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.

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.

• javascript
• jquery

4 Answers 4

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

how about this easy solution:

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

var url = /url\(\s*(['"]?)(.*?)\1\s*\)/g.exec(str)[2];

Taken from the waitForImages jQuery plugin. I'm also the author.

Something like:

var imgUrl = 'http://example.com/images/layout/image.png';
var i = imgUrl.lastIndexOf("/"); 
var filename = imgUrl.substring(i, imgUrl.length - 1);
alert(filename); 

In pure JS terms