diff --git a/src/index.html b/src/index.html
index 808819a06..3a469bdf1 100644
--- a/src/index.html
+++ b/src/index.html
@@ -126,7 +126,7 @@
       </div>
     </div>
 
-    <div class="animateMe ng-hide layout-root" ng-show="initialized">
+    <div id="mainContentContainer" class="animateMe ng-hide layout-root" ng-show="initialized">
 
         <!-- Navigation -->
         <nav class="navbar navbar-default navbar-static-top shadow" role="navigation" style="margin-bottom: 0">
diff --git a/src/js/client.js b/src/js/client.js
index 3b0e34f16..e31505f40 100644
--- a/src/js/client.js
+++ b/src/js/client.js
@@ -1938,6 +1938,27 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout
         }
     };
 
+    Client.prototype.getBackgroundImageUrl = function () {
+        return client.apiOrigin + '/api/v1/profile/backgroundImage?access_token=' + token + '&bustcache=' + Date.now();
+    };
+
+    Client.prototype.setBackgroundImage = function (backgroundImage, callback) {
+        // Blob type if object
+        var fd = new FormData();
+        fd.append('backgroundImage', backgroundImage);
+
+        var config = {
+            headers: { 'Content-Type': undefined },
+            transformRequest: angular.identity
+        };
+
+        post('/api/v1/profile/backgroundImage', fd, config, function (error, data, status) {
+            if (error) return callback(error);
+            if (status !== 202) return callback(new ClientError(status, data));
+            callback(null);
+        });
+    };
+
     Client.prototype.makeUserLocal = function (userId, callback) {
         post('/api/v1/users/' + userId + '/make_local', {}, null, function (error, data, status) {
             if (error) return callback(error);
diff --git a/src/js/main.js b/src/js/main.js
index 80e432f5f..97f643d25 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -12,6 +12,7 @@ angular.module('Application').controller('MainController', ['$scope', '$route',
     $scope.subscription = {};
     $scope.notificationCount = 0;
     $scope.hideNavBarActions = $location.path() === '/logs';
+    $scope.backgroundImageUrl = '';
 
     $scope.reboot = {
         busy: false,
@@ -131,6 +132,8 @@ angular.module('Application').controller('MainController', ['$scope', '$route',
 
                             $scope.config = Client.getConfig();
 
+                            document.getElementById('mainContentContainer').style.backgroundImage = 'url("' + Client.getBackgroundImageUrl() + '")';
+
                             $scope.initialized = true;
 
                             if (Client.getConfig().mandatory2FA && !Client.getUserInfo().twoFactorAuthenticationEnabled) {
diff --git a/src/theme.scss b/src/theme.scss
index 7fa63759a..dc9ca3465 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -201,6 +201,12 @@ html, body {
     overflow: auto;
 }
 
+#mainContentContainer {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
 #ng-view {
     display: flex;
     flex-direction: column;
diff --git a/src/views/profile.html b/src/views/profile.html
index cc1cc72dd..0db9b33a8 100644
--- a/src/views/profile.html
+++ b/src/views/profile.html
@@ -40,6 +40,28 @@
   </div>
 </div>
 
+<!-- Modal change backgroundImage -->
+<div class="modal fade" id="backgroundImageChangeModal" tabindex="-1" role="dialog">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title">{{ 'profile.changeBackgroundImage.title' | tr }}</h4>
+      </div>
+      <div class="modal-body settings-avatar-selector">
+        <div class="preview-avatar">
+          <img id="previewBackgroundImage" width="100%" height="400px" class="copy" style="object-fit: cover;" ng-click="backgroundImageChange.showCustomBackgroundImageSelector()"/>
+          <input type="file" id="backgroundImageFileInput" style="display: none" accept="image/*"/>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-danger pull-left" ng-click="backgroundImageChange.unset()" ng-disabled="backgroundImageChange.busy"><i class="fa fa-circle-notch fa-spin" ng-show="backgroundImageChange.busy"></i> Remove Background Image</button>
+        <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.cancel' | tr }}</button>
+        <button type="button" class="btn btn-success" ng-click="backgroundImageChange.submit()" ng-disabled="backgroundImageChange.busy || !backgroundImageChange.pictureChanged"><i class="fa fa-circle-notch fa-spin" ng-show="backgroundImageChange.busy"></i> {{ 'main.dialog.save' | tr }}</button>
+      </div>
+    </div>
+  </div>
+</div>
+
 <!-- Modal change password -->
 <div class="modal fade" id="passwordChangeModal" tabindex="-1" role="dialog">
   <div class="modal-dialog">
@@ -390,6 +412,7 @@
             <tr>
               <td class="text-right" colspan="2" style="vertical-align: top;">
                 <br/>
+                <button class="btn btn-default" ng-click="backgroundImageChange.show()">Set Background Image</button>
                 <button class="btn" ng-class="user.twoFactorAuthenticationEnabled ? 'btn-danger' : 'btn-success'" ng-click="twoFactorAuthentication.show()">{{ user.twoFactorAuthenticationEnabled ? 'profile.disable2FAAction' : 'profile.enable2FAAction' | tr }}</button>
                 <button class="btn btn-primary" ng-click="passwordchange.show()" ng-hide="user.source">{{ 'profile.changePasswordAction' | tr }}</button>
               </td>
diff --git a/src/views/profile.js b/src/views/profile.js
index 666c4c0bb..d4731fb56 100644
--- a/src/views/profile.js
+++ b/src/views/profile.js
@@ -231,6 +231,51 @@ angular.module('Application').controller('ProfileController', ['$scope', '$trans
         }
     };
 
+    $scope.backgroundImageChange = {
+        busy: false,
+        error: {},
+        pictureChanged: false,
+
+        submit: function () {
+            $scope.backgroundImageChange.error.backgroundImage = null;
+            $scope.backgroundImageChange.busy = true;
+
+            var imageFile = document.getElementById('backgroundImageFileInput').files[0];
+            if (!imageFile) return;
+
+            Client.setBackgroundImage(imageFile, function (error) {
+                if (error) return console.error('Unable to change backgroundImage.', error);
+
+                document.getElementById('mainContentContainer').style.backgroundImage = 'url("' + Client.getBackgroundImageUrl() + '")';
+
+                $('#backgroundImageChangeModal').modal('hide');
+                $scope.backgroundImageChange.reset();
+            });
+        },
+
+        setPreviewBackgroundImage: function (backgroundImageData) {
+            $scope.backgroundImageChange.pictureChanged = true;
+            document.getElementById('previewBackgroundImage').src = backgroundImageData;
+        },
+
+        reset: function () {
+            $scope.backgroundImageChange.error.avatar = null;
+
+            document.getElementById('previewBackgroundImage').src = Client.getBackgroundImageUrl();
+            $scope.backgroundImageChange.pictureChanged = false;
+            $scope.backgroundImageChange.busy = false;
+        },
+
+        show: function () {
+            $scope.backgroundImageChange.reset();
+            $('#backgroundImageChangeModal').modal('show');
+        },
+
+        showCustomBackgroundImageSelector: function () {
+            $('#backgroundImageFileInput').click();
+        }
+    };
+
     $scope.passwordchange = {
         busy: false,
         error: {},
@@ -676,6 +721,16 @@ angular.module('Application').controller('ProfileController', ['$scope', '$trans
         fr.readAsDataURL(event.target.files[0]);
     };
 
+    $('#backgroundImageFileInput').get(0).onchange = function (event) {
+        var fr = new FileReader();
+        fr.onload = function () {
+            $scope.$apply(function () {
+                $scope.backgroundImageChange.setPreviewBackgroundImage(fr.result);
+            });
+        };
+        fr.readAsDataURL(event.target.files[0]);
+    };
+
     // setup all the dialog focus handling
     ['passwordChangeModal', 'apiTokenAddModal', 'appPasswordAddModal', 'emailChangeModal', 'fallbackEmailChangeModal', 'displayNameChangeModal', 'twoFactorAuthenticationEnableModal', 'twoFactorAuthenticationDisableModal'].forEach(function (id) {
         $('#' + id).on('shown.bs.modal', function () {