3

Why does the following output an empty string for style.backgroundImage? How can I retrieve the height and width of the image so that I can set the dimensions of the div appropriately?

<!DOCTYPE html>
<html>
<head>  
    <link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="myDiv" onclick="outputBGImageUrl(this)">
        Click To Get BG Image Property
    </div>
    <script type="text/javascript">
        function outputBGImageUrl(elem){
            var bgImage = elem.style.backgroundImage;
            console.log(bgImage);
        }
    </script>
</body>
</html>

CSS:

.myDiv{
    background-image:url(box.jpg);
}
theGuardian
  • 439
  • 2
  • 6
  • 17

3 Answers3

9

elem.style refers to the inline styles set on the element.

the correct way to get the background image can be found here: Javascript: Get background-image URL of <div>

Here it is anyway (with improved url-getting ;-) ).

var img = document.getElementById('your_div_id'),
style = img.currentStyle || window.getComputedStyle(img, false),
bg_image_url = style.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2').split(',')[0];

And here is how you would get the dimensions:

var image = new Image();

image.onload = function(){   
    var width = image.width,
    height = image.height;
}

image.src = bg_image_url; //set the src after you have defined the onload callback
Community
  • 1
  • 1
Bill
  • 3,478
  • 23
  • 42
  • It is recommended to link to the answer in a comment rather than copying it. – Sachin Jain Feb 09 '14 at 04:49
  • *possible* duplicate.. His question is 'Why does elem.style.backgroundImage return empty'. – Bill Feb 09 '14 at 04:51
  • thanks. why arent the CSS properties contained in the inline styles set on the element? – theGuardian Feb 09 '14 at 05:37
  • maybe i should raise a new thread for this question but is there a way to obtain an Image object in a similar manner. creating a new Image object is not sufficient as Chrome requires that the image be loaded before you can pull dimensions from it. – theGuardian Feb 09 '14 at 05:49
  • Oh yeah, sorry, you should get the dimensions after the image has loaded by wrapping the code into an `onload` function – Bill Feb 09 '14 at 11:17
  • the image i want dimensions for is a bg image though. so when i make a new Image() in js, that image is never actually loaded. any work around for this? – theGuardian Feb 09 '14 at 16:25
  • Then you must be doing something wrong because my code works. http://jsfiddle.net/EMzLX/1/ – Bill Feb 09 '14 at 16:48
  • If you want to indicate that a question is a possible duplicate, flag it. If you want to answer the question, then answer it. – BoltClock Feb 27 '14 at 05:15
  • The answer on the other question is not as comprehensive as mine, and also doesn't include how to retrieve the dimensions of the background image. Not a duplicate, per say, but part of his question was already answered so it's worth making him aware of that. – Bill Feb 27 '14 at 10:45
0

It returns empty because background-image style should be between parenthesis "" or ''

.myDiv{
background-image:url("box.jpg");
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Xyzk
  • 1,332
  • 2
  • 21
  • 36
  • adding quotes did not change anything. also the linked webpage you reference does not work. the problem is the style.backgroundImage is returning empty rather than "url(box.jpg)". he uses that same method. Billy Matthews answer worked – theGuardian Feb 09 '14 at 05:35
  • @xyzk, quotes are optional ;) – Bill Feb 27 '14 at 10:46
0

This worked for me to get the image:

const section = document.getElementById("your-div-id");
const computedStyle = window.getComputedStyle(section);
const backgroundImage = computedStyle.backgroundImage;

console.log(backgroundImage);

Note: This only returns background image.

Hope it helps someone. :)

Igor Tot
  • 85
  • 1
  • 8