## Solution

Here's some vanilla js that will get the effective background color for a given element:

```js
function getInheritedBackgroundColor(el) {
  // get default style for current browser
  var defaultStyle = getDefaultBackground() // typically "rgba(0, 0, 0, 0)"
  
  // get computed color for el
  var backgroundColor = window.getComputedStyle(el).backgroundColor
  
  // if we got a real value, return it
  if (backgroundColor != defaultStyle) return backgroundColor

  // if we've reached the top parent el without getting an explicit color, return default
  if (!el.parentElement) return defaultStyle
  
  // otherwise, recurse and try again on parent element
  return getInheritedBackgroundColor(el.parentElement)
}

function getDefaultBackground() {
  // have to add to the document in order to use getComputedStyle
  var div = document.createElement("div")
  document.head.appendChild(div)
  var bg = window.getComputedStyle(div).backgroundColor
  document.head.removeChild(div)
  return bg
}
```

Then you can call it like this:

```js
var myEl = document.getElementById("a")
var bgColor = getInheritedBackgroundColor(myEl)
```


[**Demo in jsFiddle**][2]


## Explanation

The solution works by checking the resolved value for a particular element. If the background is transparent, it'll start over again with the element's parent until it finds a defined color or reaches the top.

There are two main concepts to be familiar with:

1. How **background-color** is set?
2. How **resolved values** work?


According to MDN, [`background-color`][4] has an *initial value* of `transparent` and is *not* an inherited property.  Meaning even if a parent div has a color applied, any unstyled child div will have a `background-color` of `transparent`.  Most browsers, will convert this to an rgb color space so will return the value of `rgba(0,0,0,0)` with the *alpha channel* / transparency set to `0%`.

This distinction may seem trivial, but it's important to understand that *most* divs on a page are probably transparent.  They do not paint any colors, they just don't mask parent elements.  If background values were inherited, [colors with transparency would stack and get stronger on child elements][1]

According to MDN, [**resolved values**][11] are what is returned by the browser from [`.getComputedStyle()`][5] which includes *computed values* and *used values*.  Using the resolved value helps handle special values like `inherit`, `initial`, etc. and coverts any relative values to absolute values.  Plus also provides a consistent API for getting styling info from attributes vs those applied via stylesheets.

So `window.getComputedStyle()` isn't used to determine the color that appears in the background; it's just there to get the actual value for the div.  And then we'll traverse up the DOM tree until we find an actual value.


## Further Reading

* [**MDN** - Color Value][3]
* [**MDN** - background-color][4]
* [**MDN** - `.getComputedStyle()`][5]

    ---

* [**SO** - How to get the background color of an HTML element?][6]
* [**SO** - Getting the real background-color of an element?][7]
* [**SO** - How do I detect the inherited background-color of an element using JS?][8]
* [**SO** - getComputedStyle gives "transparent" instead of actual background color][9]
* [**SO** - How do I get the element's background color in JavaScript?][10]

  [1]: https://jsfiddle.net/KyleMit/L6tkwqo9/
  [2]: https://jsfiddle.net/KyleMit/z1va3xbq/
  [3]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
  [4]: https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
  [5]: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
  [6]: https://stackoverflow.com/q/1887104/1366033
  [7]: https://stackoverflow.com/q/12576084/1366033
  [8]: https://stackoverflow.com/q/4259815/1366033
  [9]: https://stackoverflow.com/q/22876295/1366033
  [10]: https://stackoverflow.com/q/17136012/1366033
  [11]: https://developer.mozilla.org/en-US/docs/Web/CSS/resolved_value

I have this HTML page:





    document.addEventListener("DOMContentLoaded", function (event) {
      var inner_div = document.getElementById("innerDiv");
      console.log(getComputedStyle(inner_div, null)["backgroundColor"]);
    });



    #outterDiv {
      background-color: papayawhip;
    }



    <div id="outterDiv">
      <div id="innerDiv">
        I am an inner div
      </div>
    </div>



I want to find out the computed background color of the inner div without having to look into parent(s) element's computed style.  Is that possible?