Closed macsupport closed 6 years ago
@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.
@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.
I want to show the background image color using
data-adaptive-background data-ab-css-background
only when the parent div has a class.is-selected
but I'm having an issue setting the selector to do this. Is this possible with this setting or is there another way to do this?selector: '.is-selected [data-adaptive-background]',