Why is document.body.style.backgroundImage name not displaying in alert?

Question

In the following code

<style>
   /* Set height to 100% for body and html to enable the background image to cover the whole page: */
  body, html {
    height: 100%
  }

  body {
    background-image: url('/assets/root/001.png');
    // background-size: contain;
    // background-position: center;
    background-size: 786px 594px;
    // background-size: 1920px 933px;
    background-repeat: no-repeat;
  }
</style>

<div> 
  <h1>Some message</h1>

  <button type="button" onclick="myFunction()">Get background image</button>
  <script>
    function myFunction() {
        debugger;
        alert(document.body.style.backgroundImage);
    }
  </script>


  <script language="JavaScript" type="text/javascript">
    var width = $(window).width();
    var height = $(window).height();

    /* debugger; */
    alert(document.body.style.backgroundImage);

    alert('Window is ' + width + ':' + height)
  </script>
</div>

I expect

alert(document.body.style.backgroundImage);

to display something like '/assets/root/001.png' but the alert shows nothing in both Firefox(61.0.1 (64-bit)) as well a Chrome(Version 68.0.3440.84 (Official Build) (64-bit)) both when I refresh the page or click on the "Get background image" button.

In the Firefox debugger I see the value of document.body.style.backgroundImage as "" when I click on the "Get background image" button and thus hit the debugger statement.

Obviously, I'm using jQuery.

N.B. The background image does display on the webpage. Also, I don't see any other errors in the debugging console. Also the

alert('Window is ' + width + ':' + height)

seems to output the correct values.

I don't know if this is relevant but I'm in a Rails environment.

What am I doing wrong?

The `style` object only contains styles set directly on the element. Styles from CSS won't be there. — Pointy, Aug 03 '18 at 21:45
I was going to say the same as about these others say. You are telling javascript to bring in an image, but you are not telling the JS where to find that image. It's not pulling it from the CSS because you haven't told it to do that, and it isn't pulling from javascript because it doesn't know where to look. — Chris Hitchcock, Aug 03 '18 at 21:54
@Pointy and Chris: I thank you both. I do not understand Chris' answer. Specifically, how would I tell Javascript to pull from CSS? In addition, an opinion, please. Does anyone know of a good book on Javascript that explains these concepts? — RalphShnelvar, Aug 04 '18 at 11:54
It's not really a *JavaScript* thing; it's about browser APIs and how CSS relates to the HTML DOM. The `style` object on a DOM node just has what appears in "style" attributes, like `
`. The `style` object for that example `
` *would* show the "width" value. — Pointy, Aug 04 '18 at 12:36

score 3 · Answer 1 · answered Aug 03 '18 at 21:51

Since you're using jQuery, you can get the style with:

$('body').css('backgroundImage')

jQuery gets an element's computed style, even if it's declared in a stylesheet only.

console.log($('body').css('backgroundImage'));

body {
  background-image: url('/assets/root/001.png');
  background-size: 786px 594px;
  background-repeat: no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

score 2 · Answer 2 · answered Aug 03 '18 at 21:50

@Pointy is right, style only refers to inline styles. You can use window.getComputedStyle(document.body) to get all styles after applying stylesheets, etc:

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

Something like this would probably do:

alert(window.getComputedStyle(document.body).getPropertyValue('background-image'));

Why is document.body.style.backgroundImage name not displaying in alert?

2 Answers2