Merge branch 'dev-v7' into temp8

# Conflicts:
#	src/Umbraco.Web.UI.Client/src/common/directives/components/imaging/umbimagegravity.directive.js
#	src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.controller.js
#	src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.html

src/Umbraco.Web.UI.Client/src/less/property-editors.less

@@ -1,3 +1,5 @@
+@checkered-background: url(../img/checkered-background.png);
+
 //
 // Container styles
 // --------------------------------------------------
@@ -353,7 +355,7 @@
     max-height:100%;
     margin:auto;
     display:block;
-    background-image: url(../img/checkered-background.png);
+    background-image: @checkered-background;
 }
 
 .umb-sortable-thumbnails li .trashed {
@@ -576,12 +578,18 @@
         vertical-align: top;
     }
 
-    .gravity-container .viewport {
-        max-width: 600px;
-    }
+    .gravity-container {
+        border: 1px solid @gray-8;
+        line-height: 0;
 
-    .gravity-container .viewport:hover {
-        cursor: pointer;
+        .viewport {
+            max-width: 600px;
+            background: @checkered-background;
+
+            &:hover {
+                cursor: pointer;
+            }
+        }
     }
 
     .imagecropper {
@@ -594,6 +602,10 @@
             float: left;
             max-width: 100%;
         }
+
+        .viewport img {
+            background: @checkered-background;
+        }
     }
 
     .imagecropper .umb-cropper__container {
@@ -724,6 +736,10 @@
   list-style: none;
   vertical-align: middle;
   margin-bottom: 0;
+
+  img {
+    background: @checkered-background;
+  }
 }
 
 .umb-fileupload label {