'Get the document's background color

Most web browsers, by default, render pages as having a white background. However, this is to some extent user customizable, and some browsers are different. So, I want to find a way, either through CSS or JavaScript, to find out the background color of the page. The documentation on Mozilla's website suggests that document.bgColor can be used, and that its default value is white. It also suggests to not use it, since it's deprecated. But the docs seem to be in conflict with observed behavior: document.bgColor is an empty string if the page has no CSS to change it. The alternatives suggested don't work either: everything I tried gives me either an empty string or "transparent", which is clearly wrong: I can not see the desktop beneath my browser, hence it is not transparent. (Incidentally, IE11 actually behaves like Mozilla's documentation says that Firefox does. Go figure.)

I want to create an html list element (<ul>) whose background color matches the background color of the document. Is this possible? (I suppose you might be tempted to ask: if I want it to match the background, isn't "transparent" what I want? No. I want it to cover up some other element. Why? Because I'm making one of those auto-suggest thingies.)

Edit: 2 people have wisely suggested that I add an example so it becomes clear what on earth I'm talking about. Based on the answers I've been receiving, these 2 people are absolutely right. I've added a link to a fiddle in the comments of one of the answers, and now I'm adding it here:

https://jsfiddle.net/ftgu97fj/5/

javascripthtmlcsscolors


Solution 1:[1]

You could use CSS2 system colors - note that these are deprecated in CSS3 and appearance property is advised to use instead.

ul { background-color: Background; } /* this should be desktop background */

ul { background-color: Window; } /* this is browser background */

Solution 2:[2]

EDIT: Jan Turo? has found a method of doing this using CSS2 System Colors; Please defer to his answer. Note that the system colors are deprecated and that window is the default background color.

Based on the answer in this post regarding background color of highlighted text, it seems that this is likely not possible; the relevant question is also a browser-specific choice of a very similar nature:

Kaiido:

I would say that you can't.

Both getComputedStyle(yourElement, '::selection').backgroundColor and getComputedStyle(yourElement, '::-moz-selection').backgroundColor will return transparent as default value and browser won't override os's default. (Worth to be mentioned that if you set it to transparent, default os' value will be overriden).

I don't think browsers have access to os default preferences, and if they do, they probably won't let any website access it it so easily.

This question suggests using a canvas element to sample the pixel color, but this unfortunately does not seem to work; in Chrome, it will return 0,0,0,0 for the color of an unset pixel. It gives a potential solution using chrome.tabs, but this is only available to chrome extensions.

The only possibility I can think of would be to use something like HTML2Canvas to "screenshot" the page and sample an empty pixel there, but there is no guarantee this library will operate properly for an unset background.

Solution 3:[3]

If <ul> element is a direct descendant of <body> element you can use css inherit keyword

  ul {
    background-color: inherit;
  }

Solution 4:[4]

Since comments are getting way too long on OPs post, here's what I'd suggest you try:

window.getComputedStyle(document.body)['backgroundColor'])

The usecase of your autosuggest displaying correctly on pages where no background-color has been set (such as empty page) should be covered by setting white as the default background color for your ul. It becomes alot more problematic if you want to take possible background-images into account as well.

Please also be aware that html can have a background-color as well, and body may be limited in size to not cover the whole viewport. See this pen:

http://codepen.io/connexo/pen/jrAxAZ

This also illustrates that your expectation to see your desktop behind your browser if the body were truly tranparent is wrong.

Solution 5:[5]

Nowadays, with access to the system colours and other user preferences, we can simply do this:

    ul { background-color: Canvas }

See: CSS Color Module ยง System Colors

Solution 6:[6]

This will definitely solve the problem! check how the js function works

function getBackground(jqueryElement) {
    // Is current element's background color set?
    var color = jqueryElement.css("background-color");
    
    if (color !== 'rgba(0, 0, 0, 0)') {
        // if so then return that color
        return color;
    }

    // if not: are you at the body element?
    if (jqueryElement.is("body")) {
        // return known 'false' value
        return false;
    } else {
        // call getBackground with parent item
        return getBackground(jqueryElement.parent());
    }
}

$(function() {
    alert(getBackground($("#target")));
    document.getElementById("ul").style.backgroundColor = getBackground($("#target"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<ul id= "ul" style="background-color: red">
    <p id="target">I'd like to know that the background-color here is red</p>
</ul>

i kept the prompt for your better understanding

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Community
Solution 3 guest271314
Solution 4
Solution 5 Michael Allan
Solution 6

Related Questions