Call to Action

[melissa-reynaud-foley]

Component: Call to Action (full-width)
Action: Adding a background image
Problem: Displays overlapping images in the editor

Notes:

When adding a background image to the Call to Action component, the editor displays 2 overlapping images (you can not see this if the image is positioned in the center).

Overlapping images (centered) - you can't tell there are 2 images:

Background image is displayed correctly on the published page:

It becomes a problem when the image's position is changed and no longer centered - in this case the position is at the very bottom of the image (although it's hard to see for sure because of the top image over it).

Overlapping images in the editor (position of the image has changed) - you can definitely tell there are 2 images:

When published, the bottom image is the one that is displayed (and in the correct position) and the top image does not appear.

Background image is displayed at the correct position on the published page:

URL: https://wpstarter.vigetx.com/phcc/instructions-sandbox/

[melissa-reynaud-foley]

It also does the same with solid colors with gradients.

Editor view:

Correct published view:

[melissa-reynaud-foley]

Same issue happens with the "Contain" size of the image

Editor view:

Published view:

[melissa-reynaud-foley]

And with the tile view:

Editor view:

Published view: