[FIX] website_editor: use background image on the right element

Commit [1] addressed the following situation: when we have a parallax on
an element, it adds the background on a `<span>` child of said element
instead of applying it directly on the element. Retargeting the `<span>`
is needed to display all the options linked to the background image.

Following [1], building blocks whose children are allowed to have a
background image are also applied their 1st child's background when one
of their children's background is modified. This happens because, when
changing the background of a child item, `BackgroundOptimize` is called
both on the child and on the main snippet due to
`_onBackgroundChanged()` bubbling up and `_loadImageInfo()` targetting
any child in the tree with the class `.oe_img_bg`.

This commit prevents `_onBackgroundChanged()` from bubbling up and
modifies the behavior from [1] by making sure the element identified as
the target within `_loadImageInfo()` can only be either the original
target or the parallax element.

Steps to reproduce:
- Drop a carousel building block
- Change its style to bordered
- Change the background image of the 2nd slide
=> the background of the entire snippet is also changed. It is then
impossible to remove the image on the snippet.

[1]: https://github.com/odoo/odoo/commit/31ba906

task-3349669

closes odoo/odoo#127756

X-original-commit: ab0ae8dadf55baa258d733835acc3a12771932be
Signed-off-by: Outagant Mehdi (mou) <mou@odoo.com>

addons/web_editor/static/src/js/editor/snippets.options.js

@@ -6567,8 +6567,13 @@ registry.BackgroundOptimize = ImageHandlerOption.extend({
      */
     async _loadImageInfo() {
         this.img = new Image();
+        // In the case of a parallax, the background of the snippet is actually
+        // set on a child <span> and should be focused here. This is necessary
+        // because, at this point, the $target has not yet been updated in the
+        // notify() method ("option_update" event), although the event is
+        // properly fired from the parallax.
         const targetEl = this.$target[0].classList.contains("oe_img_bg")
-            ? this.$target[0] : this.$target[0].querySelector(".oe_img_bg");
+            ? this.$target[0] : this.$target[0].querySelector(":scope > .s_parallax_bg.oe_img_bg");
         if (targetEl) {
             Object.entries(targetEl.dataset).filter(([key]) =>
                 isBackgroundImageAttribute(key)).forEach(([key, value]) => {
@@ -6626,6 +6631,7 @@ registry.BackgroundOptimize = ImageHandlerOption.extend({
      * @private
      */
     async _onBackgroundChanged(ev, previewMode) {
+        ev.stopPropagation();
         if (!previewMode) {
             this.trigger_up('snippet_edition_request', {exec: async () => {
                 await this._autoOptimizeImage();