Too much to type out, please see the following screen cast: https://youtu.be/VYuVK-BR22I
ISSUES:
Background image of component shows in component page and front end but does not show in regular CS page.
Opacity param setting is reflected in CS but not on frontend. Inspector shows variable not defined.
Hey @threeoten,
The background image shows in Cornerstone when I checked.
Regarding the opacity, I’ll queue this for further investigation by our development team.
Please stay tuned.
The background image is showing because there is an element inside the column. As demonstrated in the video that I linked, the background image does not show when the column is empty. Remove the text element from column two and the background image will stop displaying.
Hello @threeoten,
When the Column is empty, you will have to set a minimum height so that there is enough space for the background image to display. Be advised that the background image is set to cover the Column area. If there is 0 height, there is no area for the background image to display.
Thanks.
On the opacity part. You have conflicting opacity settings and due to the !important your top level Custom CSS is affecting the slot opacity settings you have set.
@ruenel That makes sense, but even when I set a Min Height (or even a Height value) in the primary tab of the component, it still does not show the selected background image when using an instance of the component in CS builder. If I set the min height, it should show the background image when using an instance in the builder, right?
@charlie Sorry, I don’t fully understand what the conflict is. Could you give me an idea of how I can set it up so that it is not conflicting?
On Section 2 you have custom CSS that targets .x-bg-layer-lower-image which conflicts with the inner background image because it’s using !important. That was why the opacity setting on your inner layer was not working in my testing. I would try not using !important or try using $el > .x-bg > .x-bg-layer-lower-image as a the CSS selector.
Thanks, yeah I forgot about the inner row bg image CSS. Got it now.
Wondering about my other question still in response to Reunel, regarding the chosen bg image of col 2 not showing in the component builder unless there is an element placed in the column:
…even when I set a Min Height (or even a Height value) in the primary tab of the component, it still does not show the selected background image when using an instance of the component in CS builder. If I set the min height, it should show the background image when using an instance in the builder, right?
Also, why would this be true for my component but not true for the default CS column element, which displays the chosen background image even when the column is empty and also has no set Min Height?
Still curious about the above question
