diff --git a/src/css/settings-resize.css b/src/css/settings-resize.css
index cf6866c2..6adac315 100644
--- a/src/css/settings-resize.css
+++ b/src/css/settings-resize.css
@@ -5,4 +5,29 @@
 
 .resize-content-checkbox {
   margin-left: 0;
+}
+
+.resize-origin-container {
+  overflow: hidden;
+  position: relative;
+  width: 150px;
+  margin-top: 5px;
+}
+
+.resize-origin-option {
+  float: left;
+  box-sizing: border-box;
+  margin: 0 5px 5px 0;
+  padding-top:16px;
+  width: 45px;
+  height: 45px;
+  border : 1px solid #888;
+  text-align: center;
+  cursor: pointer;
+}
+
+.resize-origin-option.selected {
+  border-color: gold;
+  padding-top:14px;
+  border-width: 3px;
 }
\ No newline at end of file
diff --git a/src/js/controller/settings/ResizeController.js b/src/js/controller/settings/ResizeController.js
index b10f2443..0353e4ba 100644
--- a/src/js/controller/settings/ResizeController.js
+++ b/src/js/controller/settings/ResizeController.js
@@ -1,8 +1,21 @@
 (function () {
   var ns = $.namespace('pskl.controller.settings');
 
+  var ORIGIN = {
+    TOPLEFT : 'TOPLEFT',
+    TOP : 'TOP',
+    TOPRIGHT : 'TOPRIGHT',
+    MIDDLELEFT : 'MIDDLELEFT',
+    MIDDLE : 'MIDDLE',
+    MIDDLERIGHT : 'MIDDLERIGHT',
+    BOTTOMLEFT : 'BOTTOMLEFT',
+    BOTTOM : 'BOTTOM',
+    BOTTOMRIGHT : 'BOTTOMRIGHT',
+  };
+
   ns.ResizeController = function (piskelController) {
     this.piskelController = piskelController;
+    this.origin = ORIGIN.TOPLEFT;
   };
 
   ns.ResizeController.prototype.init = function () {
@@ -15,12 +28,38 @@
     this.cancelButton = $('.resize-cancel-button');
     this.cancelButton.click(this.onCancelButtonClicked_.bind(this));
 
-    this.resizeForm = $("[name=resize-form]");
+    this.resizeForm = $('[name=resize-form]');
     this.resizeForm.submit(this.onResizeFormSubmit_.bind(this));
 
+    this.resizeOrigin = document.querySelector('.resize-origin-container');
+    this.resizeOrigin.addEventListener('click', this.onResizeOriginClick_.bind(this));
+    this.setOrigin_(ORIGIN.TOPLEFT);
+
     this.resizeContentCheckbox = $(".resize-content-checkbox");
   };
 
+  ns.ResizeController.prototype.onResizeOriginClick_ = function (evt) {
+    var target = evt.target;
+    var origin = target.dataset.origin;
+    if (origin && ORIGIN[origin]) {
+      origin = origin.toUpperCase();
+      this.setOrigin_(origin);
+    }
+  };
+
+  ns.ResizeController.prototype.setOrigin_ = function (origin) {
+    this.origin = origin;
+    var previous = document.querySelector('.resize-origin-option.selected');
+    if (previous) {
+      previous.classList.remove('selected');
+    }
+
+    var selected = document.querySelector('.resize-origin-option[data-origin="' + origin + '"]');
+    if (selected) {
+      selected.classList.add('selected');
+    }
+  };
+
   ns.ResizeController.prototype.onResizeFormSubmit_ = function (evt) {
     evt.originalEvent.preventDefault();
 
@@ -51,15 +90,41 @@
     } else {
       resizedFrame = new pskl.model.Frame(width, height);
       frame.forEachPixel(function (color, x, y) {
-        if (x < resizedFrame.getWidth() && y < resizedFrame.getHeight()) {
-          resizedFrame.setPixel(x, y, color);
+        var translated = this.translateCoordinates_(x, y, frame, resizedFrame);
+        if (resizedFrame.containsPixel(translated.x, translated.y)) {
+          resizedFrame.setPixel(translated.x, translated.y, color);
         }
-      });
+      }.bind(this));
     }
 
     return resizedFrame;
   };
 
+  ns.ResizeController.prototype.translateCoordinates_ = function (x, y, frame, resizedFrame) {
+    var translatedX, translatedY;
+    if (this.origin.indexOf('LEFT') != -1) {
+      translatedX = x;
+    } else if (this.origin.indexOf('RIGHT') != -1) {
+      translatedX = x - (frame.width - resizedFrame.width);
+    } else {
+      translatedX = x - Math.round((frame.width - resizedFrame.width)/2);
+    }
+
+    if (this.origin.indexOf('TOP') != -1) {
+      translatedY = y;
+    } else if (this.origin.indexOf('BOTTOM') != -1) {
+      translatedY = y - (frame.height - resizedFrame.height);
+    } else {
+      translatedY = y - Math.round((frame.height - resizedFrame.height)/2);
+    }
+
+    return {
+      x : translatedX,
+      y : translatedY
+    };
+
+  };
+
   ns.ResizeController.prototype.isResizeContentEnabled_ = function () {
     return !!this.resizeContentCheckbox.prop('checked');
   };
diff --git a/src/templates/settings/resize.html b/src/templates/settings/resize.html
index eb898b5f..47398939 100644
--- a/src/templates/settings/resize.html
+++ b/src/templates/settings/resize.html
@@ -14,6 +14,20 @@
         <input type="text" class="textfield resize-size-field" name="resize-height"/>
         <span>px</span>
       </div>
+      <div class="resize-section">
+        <span  class="resize-section-title">Origin</span>
+        <div class="resize-origin-container">
+          <div class="resize-origin-option  selected" data-origin="TOPLEFT">TOP-L</div>
+          <div class="resize-origin-option" data-origin="TOP">TOP</div>
+          <div class="resize-origin-option" data-origin="TOPRIGHT">TOP-R</div>
+          <div class="resize-origin-option" data-origin="MIDDLELEFT">MID-L</div>
+          <div class="resize-origin-option" data-origin="MIDDLE">MID</div>
+          <div class="resize-origin-option" data-origin="MIDDLERIGHT">MID-R</div>
+          <div class="resize-origin-option" data-origin="BOTTOMLEFT">BOT-L</div>
+          <div class="resize-origin-option" data-origin="BOTTOM">BOT</div>
+          <div class="resize-origin-option" data-origin="BOTTOMRIGHT">BOT-R</div>
+        </div>
+      </div>
       <div class="resize-section">
         <input type="checkbox" class="resize-content-checkbox" name="resize-content-checkbox" value="true"/>
         <span>Resize content</span>