How can i grab the source of the background on a div

Question

Possible Duplicate:
Get URL from background-image Property

I'm using the Cycle Plugin and i want to create a pager/thumbnail.

HTML

<div id="slide">
  <div class="panel" id="product">

  </div>
</div>

My Image is on the background of the div. Not inside the div itself

JS Call

pager:'#thumbs', pagerAnchorBuilder: function(idx, slide) { return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>'; },

return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>';

I'm trying to grab the background image on product. So instead of returning + slide.src + what would i replace this with?

The above grabs the source of the image. How can i grab the background source on the div rather than the image source?

My image is on the div not inside a <img> tag.

**Thanks. **

Can you be more specific on what div u want the background for — Rahul, Sep 21 '12 at 15:06
I dont think its a duplicate since it is using a jQuery Library. — breezy, Sep 21 '12 at 15:24
Well, thedixon (and rsp and Rahul) provided exactly the same solution how to extract the URL from the CSS value, so I'd say it is a duplicate. — Felix Kling, Sep 21 '12 at 15:40

Chris Dixon · Accepted Answer · 2012-09-21T15:24:38.763

3

Not 100% sure on which div you're wanting the background image of, and where you're wanting to use it, but...

$('#product').css('background-image') will give you the URL to the background image of the product div.

So, following on from this, in your code I think you'll need it changing to:

pager:'#thumbs', pagerAnchorBuilder: function(idx, slide) { return '<li><a href="#"><img src="' + $("#product").css("background-image") + '" width="50" height="50" /></a></li>'; },

Final answer, thanks to rsp:

pager:'#thumbs', pagerAnchorBuilder: function(idx, slide) { return '<li><a href="#"><img src="' + $("#product").css("background-image").replace('url(', '').replace(')', '') + '" width="50" height="50" /></a></li>'; }

edited Sep 21 '12 at 15:24

answered Sep 21 '12 at 15:05

Chris Dixon

9,147
5
36
68

1

It won't work because the `background-image` CSS property is in the form `url(http://www.example.com/image.jpg)` so you need to remove the "url(" and ")" - see my answer. – rsp Sep 21 '12 at 15:13
1

Good shout, didn't think of that! – Chris Dixon Sep 21 '12 at 15:15
this is almost working. However it is also grabbing the parenthesis after the URL `)` – breezy Sep 21 '12 at 15:19
1

pager:'#thumbs', pagerAnchorBuilder: function(idx, slide) { return '

Chris Dixon

Sep 21 '12 at 15:23

I appreciate the help Guys. @rsp I'm going to accept this answer and up vote yours. – breezy Sep 21 '12 at 15:25

what if there are multiple selectors that i want to grab the background image from? for example `$("#product, #product2")` doesnt work. help please @thedixon @rsp – breezy Oct 17 '12 at 20:15

$("#product, #product2").each(function(i,val) { $(this).css('bacckground-image') }); – Chris Dixon Oct 18 '12 at 08:02

score 2 · Answer 2 · answered Sep 21 '12 at 15:09

You can get the background of a div with:

var url = $('#yourid').css('background-image')
                      .replace('url(', '')
                      .replace(')', '');

You need to remove 'url(' and ')' because the CSS property looks like this:

url(http://www.example.com/image.jpg)

score 1 · Answer 3 · answered Sep 21 '12 at 15:08

1

without jquery, this would be

 document.getElementById("slide").style.backgroundImage="url('xxx.png')";

answered Sep 21 '12 at 15:08

balafi

2,143
3
17
20

score 1 · Answer 4 · answered Sep 21 '12 at 15:24

1

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

url = url.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');

alert(url);

this might help

answered Sep 21 '12 at 15:24

Rahul

1,549
3
17
35

How can i grab the source of the background on a div

4 Answers4