background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box background-color: rgba(0, 0, 0, 0) background-image: nonewhile IE8 returns
background: undefined background-color: transparent background-image: none
So what would seem to be as trivial as just checking background via .css() gets a little more complicated. Thanks to the idea from @pebbl I've made a small jQuery function to determine if an element has a background.
There are two code blocks below, closure and non-closure; if you're redefining $ (ie, $ != jQuery) use the closure version.
Non-closure
$.fn.hasBack = function()
{
var me = $.fn.hasBack;
if(!me.cache)
{
// get the background color and image transparent/none values
// create a temporary element
var $tmpElem = $('<div>').hide().appendTo('body');
$.fn.hasBack.cache = {
color: $tmpElem.css('background-color'),
image: $tmpElem.css('background-image')[/indent]
};
$tmpElem.remove();
}
var elem = this.eq(0);
return !(elem.css('background-color') === me.cache.color && elem.css('background-image') === me.cache.image);
}
Closure
Exceptions
This was tested in Chrome v22, Firefox v15, Opera 12.1, IE9, IE9 set to browser modes 9 compat, 9, 8, 7 and quirks mode.
Test case here.
