diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index 091ad933e74..c16574eacc0 100644
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -714,7 +714,7 @@
 
             if (o.url) {
                 if (o.style) {
-                    this.$('.image-style').val(o.style)
+                    this.$('.image-style').val(o.style);
                 }
                 this.set_image(o.url);
             }
diff --git a/addons/website/static/src/js/website.snippets.js b/addons/website/static/src/js/website.snippets.js
index 3ef98d53d2d..5a9e70fb742 100644
--- a/addons/website/static/src/js/website.snippets.js
+++ b/addons/website/static/src/js/website.snippets.js
@@ -797,42 +797,11 @@
                 this.$background_img.detach();
         },
 
-        /*
-        * active the cke rte editor for change image url
-        */
-        active_change_image: function ($image) {
-            var self = this;
-            // cke select image with mousedown on image
-            var $image = $($image);
-            var image = $image[0];
-            var event = document.createEvent( 'HTMLEvents' );
-            event.initEvent( 'mousedown', true, true );
-            image.dispatchEvent( event );
-
-            // hack to active editor with doubleclick on editor
-            var dblclick = null;
-            $image.on("dblclick", function (evt) {
-                evt.preventDefault();
-                dblclick = new CKEDITOR.dom.event(evt.originalEvent);
-                return;
-            });
-            var event = document.createEvent( 'HTMLEvents' );
-            event.initEvent( 'dblclick', true, true );
-            image.dispatchEvent( event );
-        },
-
         change_background: function (bg, ul_options) {
             var self = this;
             var $ul = this.$editor.find(ul_options);
             var bg_value = $(bg).css("background-image").replace(/url\(|\)/g, "");
 
-            // must add an image in the DOM for rte editor
-            this.$background_img = $("<img src='"+bg_value+"'/>").css({position: "absolute", zIndex: -10, left:-1000000, top:-1000000});
-            this.$background_img.prependTo(this.$target);
-            this.$background_img.on("node_changed", function () {
-                $(bg).css("background-image", "url(" + $(this).attr('src') + ")");
-            });
-
             // select in ul options
             $ul.find("li").removeClass("active");
             var selected = $ul.find('[data-value="' + bg_value + '"], [data-value="' + bg_value.replace(/.*:\/\/[^\/]+/, '') + '"]');
@@ -849,18 +818,23 @@
                         $(this).addClass("active");
                         self.$editor.find('input').val("");
                     } else {
-                        self.active_change_image(self.$background_img);
+                        var editor = new website.editor.ImageDialog();
+                        editor.on('start', self, function (o) {o.url = bg_value;});
+                        editor.on('save', self, function (o) {
+                            $(bg).css("background-image", "url(" + o.url + ")");
+                        });
+                        editor.appendTo($('body'));
                     }
                 })
                 .on('mouseover', function (event) {
                     if ($(this).data("value")) {
                         var src = $(this).data("value");
-                        self.$background_img.attr('src', src);
+                        $(bg).css("background-image", "url(" + src + ")");
                     }
                 })
                 .on('mouseout', function (event) {
                     var src = $ul.find('li.active').data("value");
-                    self.$background_img.attr('src', src);
+                    $(bg).css("background-image", "url(" + src + ")");
                 });
         },
     });
diff --git a/addons/website_sale/static/src/css/website_sale.css b/addons/website_sale/static/src/css/website_sale.css
index cb05c7408b2..00f50208c63 100644
--- a/addons/website_sale/static/src/css/website_sale.css
+++ b/addons/website_sale/static/src/css/website_sale.css
@@ -140,7 +140,6 @@
     display: none;
   }
 }
-
 @media (min-width: 992px) {
   .col-md-12 .oe-height-1 {
     height: 95px;
@@ -174,7 +173,6 @@
     height: 576px;
   }
 }
-
 @media (min-width: 1200px) {
   .col-md-12 .oe-height-1 {
     height: 125px;
@@ -208,7 +206,6 @@
     height: 760px;
   }
 }
-
 /* ---- Product list style ---- */
 .oe_list_products {
   border: none;
@@ -267,7 +264,7 @@
   background-color: transparent;
 }
 
-.cke_editable #products_grid td:hover > .css_options {
+.cke_editable #products_grid .oe_product_cart:hover > .css_options {
   display: block;
 }
 
@@ -362,7 +359,7 @@ ul.wizard li.text-success {
 }
 
 ul.wizard li.text-success .chevron:before {
-  border-left: 10px solid #f5f5f5;
+  border-left: 10px solid whitesmoke;
 }
 
 ul.wizard li.text-primary {
diff --git a/addons/website_sale/static/src/css/website_sale.sass b/addons/website_sale/static/src/css/website_sale.sass
index b7a0ece553f..cd05d61511a 100644
--- a/addons/website_sale/static/src/css/website_sale.sass
+++ b/addons/website_sale/static/src/css/website_sale.sass
@@ -226,7 +226,7 @@
                 background-color: transparent
 
 .cke_editable
-    #products_grid td:hover > .css_options
+    #products_grid .oe_product_cart:hover > .css_options
         display: block
 
 /* Ribbon for promotionso on products */
diff --git a/addons/website_sale/views/website_sale.xml b/addons/website_sale/views/website_sale.xml
index 8379e40d935..4a3d64436be 100644
--- a/addons/website_sale/views/website_sale.xml
+++ b/addons/website_sale/views/website_sale.xml
@@ -146,58 +146,60 @@
                                 t-att-rowspan="td_product['y']"
                                 t-attf-class="oe_product oe-height-#{td_product['y']*2} #{ td_product['class'] }">
 
-                                <div class="css_options" t-ignore="true" t-if="editable">
-                                  <div t-attf-class="dropdown js_options" t-att-data-id="product.id">
-                                    <a class="btn btn-default" t-att-id="'dopprod-%s' % product.id" role="button" data-toggle="dropdown">Options <span class="caret"></span></a>
-                                    <ul class="dropdown-menu" role="menu" t-att-aria-labelledby="'dopprod-%s' % product.id">
-                                      <li class='dropdown-submenu'>
-                                        <a tabindex="-1" href="#">Size</a>
-                                        <ul class="dropdown-menu" name="size">
-                                          <li><a href="#">
-                                            <table>
-                                              <tr>
-                                                <td class="selected"></td>
-                                                <td t-att-class="product.website_size_x > 1 and 'selected'"></td>
-                                                <td t-att-class="product.website_size_x > 2 and 'selected'"></td>
-                                                <td t-att-class="product.website_size_x > 3 and 'selected'"></td>
-                                              </tr>
-                                              <tr>
-                                                <td t-att-class="product.website_size_y > 1 and 'selected'"></td>
-                                                <td t-att-class="product.website_size_y > 1 and product.website_size_x > 1 and 'selected'"></td>
-                                                <td t-att-class="product.website_size_y > 1 and product.website_size_x > 2 and 'selected'"></td>
-                                                <td t-att-class="product.website_size_y > 1 and product.website_size_x > 3 and 'selected'"></td>
-                                              </tr>
-                                              <tr>
-                                                <td t-att-class="product.website_size_y > 2 and 'selected'"></td>
-                                                <td t-att-class="product.website_size_y > 2 and product.website_size_x > 1 and 'selected'"></td>
-                                                <td t-att-class="product.website_size_y > 2 and product.website_size_x > 2 and 'selected'"></td>
-                                                <td t-att-class="product.website_size_y > 2 and product.website_size_x > 3 and 'selected'"></td>
-                                              </tr>
-                                              <tr>
-                                                <td t-att-class="product.website_size_y > 3 and 'selected'"></td>
-                                                <td t-att-class="product.website_size_y > 3 and product.website_size_x > 1 and 'selected'"></td>
-                                                <td t-att-class="product.website_size_y > 3 and product.website_size_x > 2 and 'selected'"></td>
-                                                <td t-att-class="product.website_size_y > 3 and product.website_size_x > 3 and 'selected'"></td>
-                                              </tr>
-                                            </table>
-                                          </a></li>
-                                        </ul>
-                                      </li>
-                                      <li class='dropdown-submenu'>
-                                        <a tabindex="-1" href="#">Styles</a>
-                                        <ul class="dropdown-menu" name="style">
-                                          <t t-foreach="styles" t-as="style">
-                                            <li t-att-class="style.id in [s.id for s in product.website_style_ids] and 'active' or ''"><a href="#" t-att-data-id="style.id" t-att-data-class="style.html_class"><t t-esc="style.name"/></a></li>
-                                          </t>
-                                        </ul>
-                                      </li>
-                                    </ul>
-                                  </div>
-                                </div>
-
                                 <div class="oe_product_cart" t-att-data-publish="product.website_published and 'on' or 'off'">
+                                  
+                                  <div class="css_options" t-ignore="true" t-if="editable">
+                                    <div t-attf-class="dropdown js_options" t-att-data-id="product.id">
+                                      <a class="btn btn-default" t-att-id="'dopprod-%s' % product.id" role="button" data-toggle="dropdown">Options <span class="caret"></span></a>
+                                      <ul class="dropdown-menu" role="menu" t-att-aria-labelledby="'dopprod-%s' % product.id">
+                                        <li class='dropdown-submenu'>
+                                          <a tabindex="-1" href="#">Size</a>
+                                          <ul class="dropdown-menu" name="size">
+                                            <li><a href="#">
+                                              <table>
+                                                <tr>
+                                                  <td class="selected"></td>
+                                                  <td t-att-class="product.website_size_x > 1 and 'selected'"></td>
+                                                  <td t-att-class="product.website_size_x > 2 and 'selected'"></td>
+                                                  <td t-att-class="product.website_size_x > 3 and 'selected'"></td>
+                                                </tr>
+                                                <tr>
+                                                  <td t-att-class="product.website_size_y > 1 and 'selected'"></td>
+                                                  <td t-att-class="product.website_size_y > 1 and product.website_size_x > 1 and 'selected'"></td>
+                                                  <td t-att-class="product.website_size_y > 1 and product.website_size_x > 2 and 'selected'"></td>
+                                                  <td t-att-class="product.website_size_y > 1 and product.website_size_x > 3 and 'selected'"></td>
+                                                </tr>
+                                                <tr>
+                                                  <td t-att-class="product.website_size_y > 2 and 'selected'"></td>
+                                                  <td t-att-class="product.website_size_y > 2 and product.website_size_x > 1 and 'selected'"></td>
+                                                  <td t-att-class="product.website_size_y > 2 and product.website_size_x > 2 and 'selected'"></td>
+                                                  <td t-att-class="product.website_size_y > 2 and product.website_size_x > 3 and 'selected'"></td>
+                                                </tr>
+                                                <tr>
+                                                  <td t-att-class="product.website_size_y > 3 and 'selected'"></td>
+                                                  <td t-att-class="product.website_size_y > 3 and product.website_size_x > 1 and 'selected'"></td>
+                                                  <td t-att-class="product.website_size_y > 3 and product.website_size_x > 2 and 'selected'"></td>
+                                                  <td t-att-class="product.website_size_y > 3 and product.website_size_x > 3 and 'selected'"></td>
+                                                </tr>
+                                              </table>
+                                            </a></li>
+                                          </ul>
+                                        </li>
+                                        <li class='dropdown-submenu'>
+                                          <a tabindex="-1" href="#">Styles</a>
+                                          <ul class="dropdown-menu" name="style">
+                                            <t t-foreach="styles" t-as="style">
+                                              <li t-att-class="style.id in [s.id for s in product.website_style_ids] and 'active' or ''"><a href="#" t-att-data-id="style.id" t-att-data-class="style.html_class"><t t-esc="style.name"/></a></li>
+                                            </t>
+                                          </ul>
+                                        </li>
+                                      </ul>
+                                    </div>
+                                  </div>
+
                                   <t t-call="website_sale.products_cart"/>
                                 </div>
+
                             </td>
                             </t>
                             <td t-if="td_product == None"/>