Getting background image url from inline css with jquery

Question

I need same link as url(img/bg/06.jpg) but jquery give me a long link same as url("file:///D:/WORKING%20FILE/One%20Landing%20Page/version/img/bg/06.jpg")

Here is my code:

<div class="box_bg">
    <div style="background-image: url(img/bg/06.jpg)" class="single_bg"></div>
    <div style="background-image: url(img/bg/07.jpg)" class="single_bg"></div
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">

<script>
    $('.box_bg .single_bg').each(function () {
        var bg_img = $(this).css('backgroundImage');
        $(this).click(function() {
            window.alert(bg_img);
        });
    });
</script>

Do you work just with inline styles, and are there some other properties defined, except background image? — sinisake, Nov 27 '16 at 15:33

score 0 · Accepted Answer · answered Nov 27 '16 at 15:41

If there are no more properties in your inline css, you can simple use this:

 $('.box_bg .single_bg').click(function () {
        var bg_img = $(this).attr('style').replace('background-image: ','');
        alert(bg_img);

  });

Demo:https://jsfiddle.net/k0ynq7sk/

No need for each() if you want to get image url on click on particular image...

Getting background image url from inline css with jquery

1 Answers1