diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index 6610a98d0f1..291051a0986 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -1,3 +1,4 @@
+@charset "utf-8";
 /*       THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY
  *
  * css for editor buttons, openerp widget included in the website and other
@@ -281,12 +282,16 @@ ul.nav-stacked > li > a {
 }
 
 /* ---- SNIPPETS --- */
+.oe_img_bg {
+  background-size: 100%;
+}
+
 [data-snippet-id], .colmd, .hr, .blockquote {
   overflow: hidden;
 }
 
 @media (max-width: 400px) {
-  [data-snippet-id] {
+  [data-snippet-id]:not([data-snippet-id="carousel"]) {
     height: auto !important;
   }
 }
@@ -295,7 +300,7 @@ ul.nav-stacked > li > a {
 }
 .carousel-inner .item {
   height: 100%;
-  background-size: 100%;
+  background-size: cover;
 }
 
 .carousel .carousel-caption {
@@ -365,7 +370,7 @@ div.carousel[data-snippet-id="slider"] .carousel-indicators .active {
 
 .parallax {
   position: relative;
-  background-size: 100%;
+  background-size: cover;
   display: table;
   width: 100%;
   min-height: 100px;
@@ -445,10 +450,6 @@ div.carousel[data-snippet-id="slider"] .carousel-indicators .active {
 }
 
 /* Misc */
-.oe_img_bg {
-  background-size: 100%;
-}
-
 .texttop {
   vertical-align: top;
 }
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index 2c5f691fae6..f4c0b338b6a 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -228,19 +228,24 @@ ul.nav-stacked > li > a
         a
             color: white
 
+
 /* ---- SNIPPETS --- */
+
+.oe_img_bg
+    background-size: 100%
+
 [data-snippet-id],.colmd,.hr,.blockquote
     overflow: hidden
 
 @media (max-width: 400px)
-    [data-snippet-id]
+    [data-snippet-id]:not([data-snippet-id="carousel"])
         height: auto !important
 
 .carousel-inner
     height: 100%
     .item
         height: 100%
-        background-size: 100%
+        background-size: cover
 .carousel
     .carousel-caption
         left: auto
@@ -300,7 +305,7 @@ div.carousel[data-snippet-id="slider"]
 
 .parallax
     position: relative
-    background-size: 100%
+    background-size: cover
     display: table
     width: 100%
     min-height: 100px
@@ -362,9 +367,6 @@ div.carousel[data-snippet-id="slider"]
 
 /* Misc */
 
-.oe_img_bg
-    background-size: 100%
-
 .texttop
     vertical-align: top
 
diff --git a/addons/website/static/src/js/website.snippets.animation.js b/addons/website/static/src/js/website.snippets.animation.js
index 60c5aea49e2..048cf20231f 100644
--- a/addons/website/static/src/js/website.snippets.animation.js
+++ b/addons/website/static/src/js/website.snippets.animation.js
@@ -105,7 +105,7 @@
                 var offset = 0;
                 var padding =  parseInt($(document.body).css("padding-top"));
                 if (speed < 1) {
-                    var inner_offset = self.$target.outerHeight() - this.height / this.width * document.body.clientWidth;
+                    var inner_offset = - self.$target.outerHeight() + this.height / this.width * document.body.clientWidth;
                     var outer_offset = self.$target.offset().top - (document.body.clientHeight - self.$target.outerHeight()) - padding;
                     offset = - outer_offset * speed + inner_offset;
                 } else {