get the background url from inline css with jquery

Question

I'm trying to get the background-image: url('XXX');

this is how I'm getting all the inline css

Can somebody help me to get only the url of the background-image. Thanks

$('.c-image').click(function() {
  var x = $('.colored').attr('style');
  console.log(x)

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="c-image">
  <span class="c-background">Outer Span
    <span class="colored" style= "background-size: 100%; background-repeat: no-repeat; background-image: url('0963870.jpg'); ">Inner Span</span>
  </span>
</div>

`.css("background-image");` will give you the value, which you can concatenatet to `"background-image: "` — Nick Parsons, Apr 26 '21 at 13:17
Does this answer your question? [jQuery get background image URL without the quotes?](https://stackoverflow.com/questions/36676501/jquery-get-background-image-url-without-the-quotes) — B001ᛦ, Apr 26 '21 at 13:18
There is no element in the HTML you've shown with the class `colored`... — Rory McCrossan, Apr 26 '21 at 13:18
@NickParsons its giving me this error Uncaught TypeError: $(...).attr(...).css is not a function — Alban denica, Apr 26 '21 at 13:19
I made you a snippet. It is not a [mcve] - there is nothing with class=colored — mplungjan, Apr 26 '21 at 13:19
@Albandenica that error means that the `$` variable is not a reference to `jQuery` — Rory McCrossan, Apr 26 '21 at 13:19
@RoryMcCrossan ye I accidentally remove it, I'm updating the question now — Alban denica, Apr 26 '21 at 13:20
@Albandenica Use it on colored instead: `$('.colored').css("background-image")`. Now that I'm re-reading your question, do you want to get the url from wtithin `url()` or the style? — Nick Parsons, Apr 26 '21 at 13:21
@NickParsons yes I want only the url inside () not with brackets and others — Alban denica, Apr 26 '21 at 13:25
@s.kuznetsov its giving me the url like this "875213.jpeg", I want to be just 875213.jpeg — Alban denica, Apr 26 '21 at 13:32

s.kuznetsov · Accepted Answer · 2021-04-26T13:49:07.663

To get url address without quotes use css() method and method replace().

$(".colored").click(function () {
    let cleanUrl = $(this).css("background-image").replace('url("', "").replace('")', "");
    console.log(cleanUrl);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="c-image">
    <span class="c-background">
        Outer Span
        <span class="colored" style="background-size: 100%; background-repeat: no-repeat; background-image: url(0963870jpg);">Inner Span</span>
    </span>
</div>

get the background url from inline css with jquery

1 Answers1