get background image url using attr()

Question

I use attr('style') and able to get below's value,

background-image: url(http://example.com/img/123456-bg.jpg); background-size: cover;

but how to proceed to get

123456-bg

Answer 1

Try

var $div = $('#mydiv'),
  bimg = $div.css('background-image');
var match = bimg.match(/\d+-bg/),
  value = match ? match[0] : undefined;

snippet.log(value)

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<!-- To show result in the dom instead of console, only to be used in the snippet not in production -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mydiv" style="background-image: url(http://example.com/img/123456-bg.jpg); background-size: cover;"></div>

Answer 2

More or less like this: http://jsfiddle.net/stdob/52ok19gr/3/

var url = $("#div").css('background-image');

var m = new URL(url.match(/url\((.*)\)/).pop());

m.filename = (m.pathname).substring( (m.pathname).lastIndexOf('/')+1 );

m.basename = m.filename.match(/(.*)\.(.*)/)[1];

console.log(m);

Answer 3

Use this instead

'.css("background-image")'

Answer 4

Try this...

var index = yourUrl.lastIndexOf("/") + 1;
var img = yourUrl.substr(index);
var imgName = img.substr(0, img.indexOf('.'));
alert(imgName);

Answer 5

This should work:

var imageName = $('#yourDiv').css('background-image').match(/img\/(.*)\.jpg/)[1];