title: Why does elem.style.backgroundImage return empty rather than the CSS property?
body: <p>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?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;  
      &lt;link href="test.css" rel="stylesheet" type="text/css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="myDiv" onclick="outputBGImageUrl(this)"&gt;
          Click To Get BG Image Property
      &lt;/div&gt;
      &lt;script type="text/javascript"&gt;
          function outputBGImageUrl(elem){
              var bgImage = elem.style.backgroundImage;
              console.log(bgImage);
          }
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.myDiv{
      background-image:url(box.jpg);
  }
  </code></pre>