diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 92438f33a6c..1060140c619 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -1314,36 +1314,59 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
     },
 });
 
-const ImagepickerUserValueWidget = UserValueWidget.extend({
+const MediapickerUserValueWidget = UserValueWidget.extend({
     tagName: 'we-button',
     events: {
-        'click': '_onEditImage',
+        'click': '_onEditMedia',
     },
 
     /**
      * @override
      */
-    start: async function () {
+    async start() {
         await this._super(...arguments);
+        if (this.options.dataAttributes.buttonStyle) {
+            const iconEl = document.createElement('i');
+            iconEl.classList.add('fa', 'fa-fw', 'fa-camera');
+            this.containerEl.appendChild(iconEl);
+        } else {
+            this.el.classList.add('fa', 'fa-fw', 'fa-edit');
+        }
+    },
 
-        const allowedSelector = this.el.dataset.allowVideos;
-        this.allowVideos = allowedSelector ? this.$target.is(allowedSelector) : false;
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
 
-        const iconEl = document.createElement('i');
-        iconEl.classList.add('fa', 'fa-fw', 'fa-camera');
-        this.containerEl.appendChild(iconEl);
+    /**
+     * Creates and opens a media dialog to edit a given element's media.
+     *
+     * @private
+     * @param {HTMLElement} el the element whose media should be edited
+     * @param {boolean} [images] whether images should be available
+     *   default: false
+     * @param {boolean} [videos] whether videos should be available
+     *   default: false
+     */
+    _openDialog(el, {images = false, videos = false}) {
+        el.src = this._value;
+        const $editable = this.$target.closest('.o_editable');
+        const mediaDialog = new weWidgets.MediaDialog(this, {
+            noImages: !images,
+            noVideos: !videos,
+            noIcons: true,
+            noDocuments: true,
+            isForBgVideo: true,
+            'res_model': $editable.data('oe-model'),
+            'res_id': $editable.data('oe-id'),
+        }, el).open();
+        return mediaDialog;
     },
 
     //--------------------------------------------------------------------------
     // Public
     //--------------------------------------------------------------------------
 
-    /**
-     * @override
-     */
-    getMethodsParams: function (methodName) {
-        return _.extend({isVideo: this.isVideo}, this._super(...arguments));
-    },
     /**
      * @override
      */
@@ -1357,38 +1380,50 @@ const ImagepickerUserValueWidget = UserValueWidget.extend({
     //--------------------------------------------------------------------------
 
     /**
-     * Called when the edit background button is clicked.
+     * Called when the edit button is clicked.
      *
      * @private
+     * @param {Event} ev
      */
-    _onEditImage: function (ev) {
+    _onEditMedia: function (ev) {},
+});
+
+const ImagepickerUserValueWidget = MediapickerUserValueWidget.extend({
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    _onEditMedia(ev) {
         // Need a dummy element for the media dialog to modify.
-        const dummyEl = document.createElement(this.isVideo ? 'iframe' : 'img');
-        dummyEl.src = this._value;
-        if (this.isVideo) {
-            // Allows the mediaDialog to select the video tab immediately.
-            dummyEl.classList.add('media_iframe_video');
-        }
-        const $editable = this.$target.closest('.o_editable');
-        const mediaDialog = new weWidgets.MediaDialog(this, {
-            noIcons: true,
-            noDocuments: true,
-            noVideos: !this.allowVideos,
-            isForBgVideo: true,
-            'res_model': $editable.data('oe-model'),
-            'res_id': $editable.data('oe-id'),
-        }, dummyEl).open();
-        mediaDialog.on('save', this, data => {
-            if (data.bgVideoSrc) {
-                this._value = data.bgVideoSrc;
-                this.isVideo = true;
-            } else {
-                // Accessing the value directly through dummyEl.src converts the url to absolute
-                // using getAttribute allows us to keep the url as it was inserted in the DOM
-                // which can be useful to compare it to values stored in db.
-                this._value = dummyEl.getAttribute('src');
-                this.isVideo = false;
-            }
+        const dummyEl = document.createElement('img');
+        const dialog = this._openDialog(dummyEl, {images: true});
+        dialog.on('save', this, data => {
+            // Accessing the value directly through dummyEl.src converts the url to absolute,
+            // using getAttribute allows us to keep the url as it was inserted in the DOM
+            // which can be useful to compare it to values stored in db.
+            this._value = dummyEl.getAttribute('src');
+            this._onUserValueChange();
+        });
+    },
+});
+
+const VideopickerUserValueWidget = MediapickerUserValueWidget.extend({
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    _onEditMedia(ev) {
+        // Need a dummy element for the media dialog to modify.
+        const dummyEl = document.createElement('iframe');
+        const dialog = this._openDialog(dummyEl, {videos: true});
+        dialog.on('save', this, data => {
+            this._value = data.bgVideoSrc;
             this._onUserValueChange();
         });
     },
@@ -1563,6 +1598,7 @@ const userValueWidgetsRegistry = {
     'we-colorpicker': ColorpickerUserValueWidget,
     'we-datetimepicker': DatetimePickerUserValueWidget,
     'we-imagepicker': ImagepickerUserValueWidget,
+    'we-videopicker': VideopickerUserValueWidget,
     'we-range': RangeUserValueWidget,
 };
 
@@ -3155,6 +3191,46 @@ registry.BackgroundOptimize = ImageHandlerOption.extend({
     },
 });
 
+registry.BackgroundToggler = SnippetOptionWidget.extend({
+
+    //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
+    /**
+     * Toggles background image on or off.
+     *
+     * @see this.selectClass for parameters
+     */
+    toggleBgImage(previewMode, widgetValue, params) {
+        if (!widgetValue) {
+            // TODO: use setWidgetValue instead of calling background directly when possible
+            const [bgImageWidget] = this._requestUserValueWidgets('bg_image_opt');
+            const bgImageOpt = bgImageWidget.getParent();
+            return bgImageOpt.background(false, '', bgImageWidget.getMethodsParams('background'));
+        } else {
+            // TODO: use trigger instead of el.click when possible
+            this._requestUserValueWidgets('bg_image_opt')[0].el.click();
+        }
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    _computeWidgetState(methodName, params) {
+        if (methodName === 'toggleBgImage') {
+            const [bgImageWidget] = this._requestUserValueWidgets('bg_image_opt');
+            const bgImageOpt = bgImageWidget.getParent();
+            return !!bgImageOpt._computeWidgetState('background', bgImageWidget.getMethodsParams('background'));
+        }
+        return this._super(...arguments);
+    },
+});
+
 /**
  * Handles the edition of snippet's background image.
  */
@@ -3163,10 +3239,7 @@ registry.BackgroundImage = SnippetOptionWidget.extend({
      * @override
      */
     start: function () {
-        // Initialize background and events
-        this.bindBackgroundEvents();
         this.__customImageSrc = this._getSrcFromCssValue();
-
         return this._super(...arguments);
     },
 
@@ -3206,24 +3279,12 @@ registry.BackgroundImage = SnippetOptionWidget.extend({
     // Public
     //--------------------------------------------------------------------------
 
-    /**
-     * Attaches events so that when a background-color is set, the background
-     * image is removed.
-     */
-    bindBackgroundEvents: function () {
-        if (this.$target.is('.parallax, .s_parallax_bg')) {
-            return;
-        }
-        this.$target.off('.background-option')
-            .on('background-color-event.background-option', this._onBackgroundColorUpdate.bind(this));
-    },
     /**
      * @override
      */
     setTarget: function () {
         this._super(...arguments);
         // TODO should be automatic for all options as equal to the start method
-        this.bindBackgroundEvents();
         this.__customImageSrc = this._getSrcFromCssValue();
     },
 
@@ -3244,38 +3305,11 @@ registry.BackgroundImage = SnippetOptionWidget.extend({
      * @override
      */
     _computeWidgetState: function (methodName) {
-        switch (methodName) {
-            case 'background':
-                return this._getSrcFromCssValue();
+        if (methodName === 'background') {
+            return this._getSrcFromCssValue();
         }
         return this._super(...arguments);
     },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * Called on background-color update (useful to remove the background to be
-     * able to see the chosen color).
-     *
-     * @private
-     * @param {Event} ev
-     * @param {boolean|string} previewMode
-     * @returns {boolean} true if the color has been applied (removing the
-     *                    background)
-     */
-    _onBackgroundColorUpdate: async function (ev, previewMode) {
-        ev.stopPropagation();
-        if (ev.currentTarget !== ev.target) {
-            return false;
-        }
-        if (previewMode === false) {
-            this.__customImageSrc = undefined;
-        }
-        await this.background(previewMode, '', {});
-        return true;
-    },
 });
 
 /**
@@ -3583,7 +3617,7 @@ registry.BackgroundPosition = SnippetOptionWidget.extend({
  * snippet drop (so that base snippet definition do not need to care about that)
  * and on first focus (for compatibility).
  */
-registry.ColoredLevelBackground = registry.BackgroundImage.extend({
+registry.ColoredLevelBackground = registry.BackgroundToggler.extend({
     /**
      * @override
      */
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/media_dialog.js b/addons/web_editor/static/src/js/wysiwyg/widgets/media_dialog.js
index 74574a6690c..c1160ae0e52 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/media_dialog.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/media_dialog.js
@@ -80,8 +80,8 @@ var MediaDialog = Dialog.extend({
             this.activeWidget = this.videoWidget;
         } else if (this.iconWidget && $media.is('span, i')) {
             this.activeWidget = this.iconWidget;
-        } else if (this.imageWidget) {
-            this.activeWidget = this.imageWidget;
+        } else {
+            this.activeWidget = [this.imageWidget, this.documentWidget, this.videoWidget, this.iconWidget].find(w => !!w);
         }
     },
     /**
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index b2743ef7474..7c7e7814f26 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -290,7 +290,6 @@ body.editor_enable.editor_has_snippets {
 
             &.fa {
                 display: inline-block;
-                margin: 0 0 0 $o-we-sidebar-content-field-multi-spacing;
                 padding: 0;
                 border: none;
                 background: none;
@@ -374,10 +373,16 @@ body.editor_enable.editor_has_snippets {
                     color: $o-we-sidebar-content-field-control-item-color;
                     text-align: center;
 
+                    > * {
+                        margin-left: $o-we-sidebar-content-field-multi-spacing;
+                    }
                     > we-customizeblock-option {
                         &, .fa {
                             display: inline-block !important;
                         }
+                        .fa {
+                            margin: 0;
+                        }
                     }
                 }
             }
@@ -873,7 +878,7 @@ body.editor_enable.editor_has_snippets {
             background-color: $o-we-bg-darkest;
 
             + .fa {
-                margin-left: 0;
+                margin: 0;
             }
         }
         .o_we_tag_wrapper {
diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml
index 078f8d86e60..ecd64a00d9c 100644
--- a/addons/web_editor/views/snippets.xml
+++ b/addons/web_editor/views/snippets.xml
@@ -34,7 +34,7 @@
 </template>
 
 <template id="snippet_options_image_optimization_widgets">
-    <t t-set="filter_label">Color filter</t>
+    <t t-set="filter_label">Color Filter</t>
     <t t-set="width_label">Width</t>
     <t t-set="quality_label">Quality</t>
     <div class="o_we_external_warning d-none">
@@ -42,48 +42,55 @@
             <i class="fa fa-warning" /> External Image
         </we-title>
     </div>
-    <we-colorpicker t-att-string="indent and ('⌙ %s' % filter_label) or filter_label" data-set-filter="" data-no-preview="true" data-excluded="common, theme"/>
-    <we-select t-att-string="indent and ('⌙ %s' % width_label) or width_label" data-name="width_select_opt" data-no-preview="true"/>
-    <we-range t-att-string="indent and ('⌙ %s' % quality_label) or quality_label" data-set-quality=""/>
+    <!-- &emsp; -->
+    <we-colorpicker t-att-string="indent and (' ⌙ %s' % filter_label) or filter_label" data-set-filter="" data-no-preview="true" data-excluded="common, theme"/>
+    <we-select t-att-string="indent and (' ⌙ %s' % width_label) or width_label" data-name="width_select_opt" data-no-preview="true"/>
+    <we-range t-att-string="indent and (' ⌙ %s' % quality_label) or quality_label" data-set-quality=""/>
     <div class="o_we_image_weight d-none"><i class="fa fa-long-arrow-right"/><span/></div>
 </template>
 
-<template id="snippet_options_background_selection_widgets">
-    <we-row t-if="with_colors or with_images" string="Background" class="o_we_full_row">
-        <we-colorpicker t-if="with_colors"
-                        title="Color"
-                        data-name="bg_color_opt"
-                        data-select-style=""
-                        data-css-property="background-color"
-                        data-color-prefix="bg-"
-                        t-att-data-with-combinations="with_color_combinations and 'true' or None"
-                        t-att-data-css-compatible="css_compatible and 'true' or None"/>
-        <we-button-group t-if="with_images"
-                         class="ml-auto"
-                         t-att-data-dependencies="images_dependencies"
-                         data-no-preview="true">
-            <we-imagepicker title="Image"
-                            data-background=""
-                            data-allow-videos=":not(.parallax, .s_parallax_bg)"/>
-            <we-button title="None"
-                       data-background=""><i class="fa fa-fw fa-ban"/></we-button>
-        </we-button-group>
-    </we-row>
+<template id="snippet_options_background_color_widget">
+    <we-colorpicker title="Color"
+                    data-name="bg_color_opt"
+                    data-select-style=""
+                    data-css-property="background-color"
+                    data-color-prefix="bg-"
+                    t-att-data-with-combinations="with_color_combinations and 'true' or None"
+                    t-att-data-css-compatible="css_compatible and 'true' or None"/>
 </template>
 
 <template id="snippet_options_background_options">
-    <div t-att-data-js="with_colors and with_color_combinations and 'ColoredLevelBackground' or 'BackgroundImage'"
+    <div t-att-data-js="with_colors and with_color_combinations and 'ColoredLevelBackground' or 'BackgroundToggler'"
          t-att-data-selector="selector"
          t-att-data-exclude="exclude"
          t-att-data-target="target">
-        <t t-call="web_editor.snippet_options_background_selection_widgets"/>
+        <we-row t-if="with_colors or with_images" string="Background" class="o_we_full_row">
+            <t t-if="with_colors" t-call="web_editor.snippet_options_background_color_widget"/>
+            <t t-if="with_images">
+                <we-button title="Image" class="ml-auto" data-toggle-bg-image="true" t-att-data-dependencies="images_dependencies" data-no-preview="true">
+                    <i class="fa fa-fw fa-camera"/>
+                </we-button>
+            </t>
+        </we-row>
     </div>
     <t t-if="with_images">
+        <div data-js="BackgroundImage"
+             t-att-data-selector="selector"
+             t-att-data-exclude="exclude"
+             t-att-data-target="target">
+            <we-row string="⌙ Image">
+                <we-imagepicker title="Edit image"
+                                data-background=""
+                                data-name="bg_image_opt"
+                                data-dependencies="bg_image_opt"/>
+            </we-row>
+        </div>
+
         <div data-js="BackgroundPosition"
              t-att-data-selector="selector"
              t-att-data-exclude="exclude"
              t-att-data-target="target">
-            <we-row string="⌙ Position">
+            <we-row string=" ⌙ Position"><!-- &emsp; -->
                 <we-select data-no-preview="true">
                     <we-button data-background-type="cover">Cover</we-button>
                     <we-button data-background-type="repeat-pattern" data-name="background_repeat_opt">Repeat pattern</we-button>
@@ -92,8 +99,9 @@
                         data-background-position-overlay="true" data-no-preview="true"/>
             </we-row>
             <we-multi data-css-property="background-size" data-dependencies="background_repeat_opt">
-                <we-input string="⌙ Width" data-select-style="auto" placeholder="auto" data-unit="px"/>
-                <we-input string="⌙ Height" data-select-style="auto" placeholder="auto" data-unit="px"/>
+                <!-- &emsp; -->
+                <we-input string="  ⌙ Width" data-select-style="auto" placeholder="auto" data-unit="px"/>
+                <we-input string="  ⌙ Height" data-select-style="auto" placeholder="auto" data-unit="px"/>
             </we-multi>
         </div>
 
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index be7a55f8111..c7dc9f75f98 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -626,17 +626,63 @@ options.Class.include({
     },
 });
 
-options.registry.BackgroundImage.include({
-    background: async function (previewMode, widgetValue, params) {
+options.registry.BackgroundToggler.include({
+    /**
+     * Toggles background video on or off.
+     *
+     * @see this.selectClass for parameters
+     */
+    toggleBgVideo(previewMode, widgetValue, params) {
+        if (!widgetValue) {
+            // TODO: use setWidgetValue instead of calling background directly when possible
+            const [bgVideoWidget] = this._requestUserValueWidgets('bg_video_opt');
+            const bgVideoOpt = bgVideoWidget.getParent();
+            return bgVideoOpt._setBgVideo(false, '');
+        } else {
+            // TODO: use trigger instead of el.click when possible
+            this._requestUserValueWidgets('bg_video_opt')[0].el.click();
+        }
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    _computeWidgetState(methodName, params) {
+        if (methodName === 'toggleBgVideo') {
+            return this.$target[0].classList.contains('o_background_video');
+        }
+        return this._super(...arguments);
+    },
+    /**
+     * @override
+     */
+    _computeWidgetVisibility(widgetName, params) {
+        if (widgetName === 'bg_video_toggler_opt') {
+            return !this.$target.is('.parallax, .s_parallax_bg');
+        }
+        return this._super(...arguments);
+    },
+});
+
+options.registry.BackgroundVideo = options.Class.extend({
+
+    //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
+    /**
+     * Sets the target's background video.
+     *
+     * @see this.selectClass for parameters
+     */
+    background: function (previewMode, widgetValue, params) {
         if (previewMode === 'reset' && this.videoSrc) {
             return this._setBgVideo(false, this.videoSrc);
         }
-
-        const _super = this._super.bind(this);
-        if (!params.isVideo) {
-            await this._setBgVideo(previewMode, '');
-            return _super(...arguments);
-        }
         return this._setBgVideo(previewMode, widgetValue);
     },
 
@@ -647,9 +693,12 @@ options.registry.BackgroundImage.include({
     /**
      * @override
      */
-    _computeWidgetState: function (methodName) {
-        if (methodName === 'background' && this.$target[0].classList.contains('o_background_video')) {
-            return this.$('> .o_bg_video_container iframe').attr('src');
+    _computeWidgetState: function (methodName, params) {
+        if (methodName === 'background') {
+            if (this.$target[0].classList.contains('o_background_video')) {
+                return this.$('> .o_bg_video_container iframe').attr('src');
+            }
+            return '';
         }
         return this._super(...arguments);
     },
@@ -677,33 +726,6 @@ options.registry.BackgroundImage.include({
         }
         await this._refreshPublicWidgets();
     },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-     _onBackgroundColorUpdate: async function (ev, previewMode) {
-        const ret = await this._super(...arguments);
-        if (ret) {
-            this._setBgVideo(previewMode, '');
-        }
-        return ret;
-    },
-});
-
-options.registry.BackgroundOptimize.include({
-    /**
-     * @override
-     */
-    _computeVisibility() {
-        if (this.$target.hasClass('o_background_video')) {
-            return false;
-        }
-        return this._super(...arguments);
-    },
 });
 
 options.registry.OptionsTab = options.Class.extend({
diff --git a/addons/website/views/snippets/s_chart.xml b/addons/website/views/snippets/s_chart.xml
index 52e39996d8f..b74facde91f 100644
--- a/addons/website/views/snippets/s_chart.xml
+++ b/addons/website/views/snippets/s_chart.xml
@@ -23,10 +23,9 @@
     <xpath expr="." position="inside">
         <div data-js="InnerChart" string="Chart"
             data-selector=".s_chart">
-            <t t-call="web_editor.snippet_options_background_selection_widgets">
-                <t t-set="with_colors" t-value="True"/>
-                <t t-set="with_images" t-value="False"/>
-            </t>
+            <we-row string="Background">
+                <t t-call="web_editor.snippet_options_background_color_widget"/>
+            </we-row>
             <we-select string="Type" data-attribute-name="type" data-attribute-default-value="bar" data-no-preview="true">
                 <we-button data-select-data-attribute="bar" data-name="bar_chart_opt">Bar Vertical</we-button>
                 <we-button data-select-data-attribute="horizontalBar" data-name="horizontal_bar_chart_opt">Bar Horizontal</we-button>
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 87fb21ccecb..ef54ed3f945 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -121,6 +121,31 @@
     </xpath>
 </template>
 
+<template id="snippet_options_background_options" inherit_id="web_editor.snippet_options_background_options">
+    <xpath expr="//we-button[@data-toggle-bg-image]" position="after">
+        <we-button title="Video"
+                   data-name="bg_video_toggler_opt"
+                   t-att-data-dependencies="images_dependencies"
+                   data-toggle-bg-video="true"
+                   data-no-preview="true">
+            <i class="fa fa-fw fa-film"/>
+        </we-button>
+    </xpath>
+    <xpath expr="//div[@data-js='BackgroundOptimize']" position="after">
+        <div data-js="BackgroundVideo"
+             t-att-data-selector="selector"
+             t-att-data-exclude="exclude"
+             t-att-data-target="target">
+            <we-row string="⌙ Video">
+                <we-videopicker title="Edit video"
+                                data-background=""
+                                data-name="bg_video_opt"
+                                data-dependencies="bg_video_opt"/>
+            </we-row>
+        </div>
+    </xpath>
+</template>
+
 <template id="snippet_options_border_line_widgets">
     <we-row t-att-string="label">
         <we-input data-name="border_width_opt"
@@ -622,11 +647,17 @@
          data-drop-near=".o_mega_menu .nav-link"/>
 
     <div data-js="CoverProperties" data-selector=".o_record_cover_container" data-no-check="true">
-        <t t-call="web_editor.snippet_options_background_selection_widgets">
-            <t t-set="with_colors" t-value="True"/>
-            <t t-set="with_images" t-value="True"/>
-            <t t-set="with_color_combinations" t-value="True"/>
-        </t>
+        <we-row string="Background" class="o_we_full_row">
+            <t t-call="web_editor.snippet_options_background_color_widget">
+                <t t-set="with_color_combinations" t-value="True"/>
+            </t>
+            <we-button-group class="ml-auto">
+                <we-imagepicker title="Image" data-background="" data-button-style="true"/>
+                <we-button title="None" data-background="">
+                    <i class="fa fa-fw fa-ban"/>
+                </we-button>
+            </we-button-group>
+        </we-row>
         <we-select string="Size" data-cover-opt-name="size">
             <we-button data-select-class="o_full_screen_height">Full Screen</we-button>
             <we-button class="o_record_cover_opt_size_default" data-select-class="o_half_screen_height">Half Screen</we-button>
diff --git a/addons/website_blog/static/src/js/tours/website_blog.js b/addons/website_blog/static/src/js/tours/website_blog.js
index da38d275865..a2be1051ccf 100644
--- a/addons/website_blog/static/src/js/tours/website_blog.js
+++ b/addons/website_blog/static/src/js/tours/website_blog.js
@@ -27,7 +27,7 @@ odoo.define("website_blog.tour", function (require) {
         position: "top",
         run: "text",
     }, {
-        trigger: "we-button:has(.fa-camera)",
+        trigger: "we-button[data-background]:nth(1)",
         extra_trigger: "#wrap div[data-oe-expression=\"blog_post.name\"]:not(:containsExact(\"\"))",
         content: _t("Set a blog post <b>cover</b>."),
         position: "right",