How to get css background-mage in new tab or popup in javasctipt

Question

I want to fetch the background-image from this css how can i do it?

<div  class="zoomWindow" style="overflow: hidden; background-position: -174.967px -146.847px; text-align: center; background-color: rgb(255, 255, 255); width: 700px; height: 450px; float: left; background-size: 1100px 1500px; z-index: 100; border: 0px solid rgb(136, 136, 136); background-repeat: no-repeat; position: absolute; background-image: url(&quot;http://cdn.shopclues.com/images/detailed/45044/UX8A34631_1475562297.jpg&quot;); top: 200.4px; left: 623.5px; display: none;">&nbsp;</div>

my code open the new tab with url of background image BUT the domain name is still there i dont know why

Here is my code

var img = document.getElementsByClassName('zoomWindow');
console.log(img[0].style.backgroundImage.slice(4, -1));
var imagers =img[0].style.backgroundImage.slice(11, -2);
window.open(imagers);

Possible duplicate of [Javascript: Get background-image URL of
](http://stackoverflow.com/questions/14013131/javascript-get-background-image-url-of-div) — alexwc_, Dec 23 '16 at 07:41
Just FYI, you can't use decimals in pixels. It is ineffective. Pixel values must be whole numbers — GROVER., Dec 23 '16 at 07:43
@Caelan. Thats not his code Or he works at Shopclues i dont know — Riddler, Dec 23 '16 at 07:44
@Caelan. hi yes i found but not completly i found that i can extract the bg property and open the url in new tab BUT the domain where it is coming from magically always getting there.. for example my url of image is cdn.com/image.jpg now when the new tab comes out with the url it become www.shopclues.com/cdn.com/image.jpg i dont know why — Aman, Dec 25 '16 at 17:10

score 0 · Answer 1 · answered Dec 23 '16 at 07:37

0

Using DOM:

document.getElementById('image_1').style.backgroundImage;

JQuery:

$('#image_1').css("background-image");

If you want just the url value, you will need to do one more thing, to strip the value url("http://cdn.shopclues.com/images/detailed/45044/UX8A34631_1475562297.jpg") of the url() function.

answered Dec 23 '16 at 07:37

Martin Staufcik

8,295
4
44
63

how to get only image in new tab or popup? – Aman Dec 23 '16 at 07:45
to pass the value to another page, there are several ways: you could pass it as a parameter in url or via a cookie or save the value to the server and then retireve from the other page. But, what exactly are you trying to do, would not just creating a css for the other page (using the value of the image url) work for you? – Martin Staufcik Dec 23 '16 at 12:55

score 0 · Answer 2 · answered Dec 23 '16 at 07:39

You can grab the value of the background-image property like so:

Pure JavaScript:

var imageSrc = document.getElementByClassName("zoomWindow");
var imageLocation = imageSrc.style.backgroundImage;

Or, if you have the jQuery library installed:

var imageLocation = $(".zoomWindow").css("background-image");

Hope this helps!

score 0 · Answer 3 · answered Dec 23 '16 at 07:39

0

Try this

var one =$('.zoomWindow').css("background-image");
console.log(one);

answered Dec 23 '16 at 07:39

ab29007

7,611
2
17
43

score 0 · Answer 4 · answered Dec 23 '16 at 08:01

0

Here you have with the extraction of the URL applied:

$(function(){

  var $zoomWindow = $('.zoomWindow'),
      backgroundImage = $zoomWindow.css('background-image'),
      extraction = backgroundImage.match(/[^url('][^')]*/),
      url = extraction[0];

  console.log(url); // -> http://cdn.shopclues.com/images/detailed/45044/UX8A34631_1475562297.jpg

});

answered Dec 23 '16 at 08:01

amedina

2,838
3
19
40

Follow this answer and just use window.open(url); – Ankit vadariya Dec 25 '16 at 17:30

How to get css background-mage in new tab or popup in javasctipt

4 Answers4