Question on setting selector based on parent div class about jquery.adaptive-backgrounds.js

[AlfredJKwack]

@macsupport. I can confirm this does indeed behave quite oddly. Could you use another element or class to select with alongside .is-selected instead of the [data-adaptive-background]?

@briangonzalez. I think this may also point to a bug, or at least unexpected behaviour. Check this codePen. Essentially, if we set the data-ab-css-background tag, then the module completely ignores the parent property. In #L124 it basically states that if we CSS background image is used, we don't look for a parent and the current element is in fact the parent.

[AlfredJKwack]

@macsupport Could you pull a more recent build? I've tested it again (and updated the codePen) and now it seems to work.

Taking the following html

<div class="is-selected">
    <div class="cssBg" data-adaptive-background data-ab-css-background > 
        is-selected CSS Background
    </div>
</div>
<div>
    <div class="cssBg" data-adaptive-background data-ab-css-background >
        !is-selected CSS Background
    </div>
</div>

With this JS code

$.adaptiveBackground.run({
	selector: '.is-selected [data-adaptive-background]'
});

And CSS like:

.cssBg{
  padding: 20px;
  width: 256px;
  height: 256px;
  background: no-repeat center center url( ___something useful here ___ );
}

Should give you two images for which only one has the background color set.