Be explicit about backgroundImage existance

src/js/client.js

@@ -379,7 +379,8 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout
             email: null,
             twoFactorAuthenticationEnabled: false,
             source: null,
-            avatarUrl: null
+            avatarUrl: null,
+            hasBackgroundImage: false
         };
         this._config = {
             consoleServerOrigin: null,
@@ -508,6 +509,7 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout
         this._userInfo.role = userInfo.role;
         this._userInfo.source = userInfo.source;
         this._userInfo.avatarUrl = userInfo.avatarUrl + '?s=128&default=mp&ts=' + Date.now(); // we add the timestamp to avoid caching
+        this._userInfo.hasBackgroundImage = userInfo.hasBackgroundImage;
         this._userInfo.isAtLeastOwner = [ ROLES.OWNER ].indexOf(userInfo.role) !== -1;
         this._userInfo.isAtLeastAdmin = [ ROLES.OWNER, ROLES.ADMIN ].indexOf(userInfo.role) !== -1;
         this._userInfo.isAtLeastMailManager = [ ROLES.OWNER, ROLES.ADMIN, ROLES.MAIL_MANAGER ].indexOf(userInfo.role) !== -1;

src/js/main.js

@@ -132,7 +132,10 @@ angular.module('Application').controller('MainController', ['$scope', '$route',
 
                             $scope.config = Client.getConfig();
 
-                            document.getElementById('mainContentContainer').style.backgroundImage = 'url("' + Client.getBackgroundImageUrl() + '")';
+                            if (Client.getUserInfo().hasBackgroundImage) {
+                                document.getElementById('mainContentContainer').style.backgroundImage = 'url("' + Client.getBackgroundImageUrl() + '")';
+                                document.getElementById('mainContentContainer').classList.add('has-background');
+                            }
 
                             $scope.initialized = true;
 

src/theme.scss

@@ -225,11 +225,6 @@ html, body {
     max-width: 720px;
     margin: 0 auto;
 
-    h1, h2, h3 {
-        filter: drop-shadow(0 0 0.5px black);
-        color: white;
-    }
-
     @media(min-width:768px) {
         width: 720px;
 
@@ -1943,6 +1938,19 @@ tag-input {
     }
 }
 
+// ----------------------------
+// Background image overrides
+// ----------------------------
+.has-background {
+
+    h1, h2, h3 {
+        filter: drop-shadow(0 0 0.5px black);
+        color: white;
+    }
+
+
+}
+
 // ----------------------------
 // Dark mode overrides
 // ----------------------------

src/views/profile.js

@@ -247,6 +247,7 @@ angular.module('Application').controller('ProfileController', ['$scope', '$trans
                 if (error) return console.error('Unable to change backgroundImage.', error);
 
                 document.getElementById('mainContentContainer').style.backgroundImage = 'url("' + Client.getBackgroundImageUrl() + '")';
+                document.getElementById('mainContentContainer').classList.add('has-background');
 
                 $('#backgroundImageChangeModal').modal('hide');
                 $scope.backgroundImageChange.reset();
@@ -258,6 +259,7 @@ angular.module('Application').controller('ProfileController', ['$scope', '$trans
                 if (error) return console.error('Unable to change backgroundImage.', error);
 
                 document.getElementById('mainContentContainer').style.backgroundImage = '';
+                document.getElementById('mainContentContainer').classList.remove('has-background');
 
                 $('#backgroundImageChangeModal').modal('hide');
                 $scope.backgroundImageChange.reset();