Question

I need to get the URL of an element’s background image with jQuery:

var foo = $('#id').css('background-image');

This results in something like url("http://www.example.com/image.gif"). How can I get just the “http://www.example.com/image.gif” part from that? typeof foo says it’s a string, but the url() part makes me think that JavaScript and/or jQuery has a special URL type and that I should be able to get the location with foo.toString(). That doesn’t work though.

Answer 1

Note that different browser implementations may return the string in a different format. For instance, one browser may return double-quotes while another browser may return the value without quotes. This makes it awkward to parse, especially when you consider that quotes are valid as URL characters.

I would say the best approach is a good old check and slice():

var imageUrlString = $('#id').css('background-image'),
    quote = imageUrlString.charAt(4),
    result;

if (quote == "'" || quote == '"')
    result = imageUrlString.slice(5, -2);
else
    result = imageUrlString.slice(4, -1);

Assuming the browser returns a valid string, this wouldn’t fail. Even if an empty string were returned (ie, there is no background image), the result is an empty string.