FEATURE: Allow a user to upload an image for their expansion background.

app/assets/javascripts/discourse/templates/user/preferences.hbs

@@ -97,15 +97,25 @@
     </div>
 
     {{#if allowBackgrounds}}
-    <div class="control-group pref-profile-bg">
-      <label class="control-label">{{i18n user.change_profile_background.title}}</label>
-      <div class="controls">
-        {{image-uploader uploadUrl=imageUploadUrl
-                         imageUrl=profile_background
-                         instantDelete="true"
-                         type="profile_background"}}
+      <div class="control-group pref-profile-bg">
+        <label class="control-label">{{i18n user.change_profile_background.title}}</label>
+        <div class="controls">
+          {{image-uploader uploadUrl=imageUploadUrl
+                           imageUrl=profile_background
+                           instantDelete="true"
+                           type="profile_background"}}
+        </div>
+      </div>
+
+      <div class="control-group pref-profile-bg">
+        <label class="control-label">{{i18n user.change_expansion_background.title}}</label>
+        <div class="controls">
+          {{image-uploader uploadUrl=imageUploadUrl
+                           imageUrl=expansion_background
+                           instantDelete="true"
+                           type="expansion_background"}}
+        </div>
       </div>
-    </div>
     {{/if}}
 
     {{#if allowUserLocale}}

app/assets/javascripts/discourse/views/user-expansion.js.es6

@@ -7,6 +7,21 @@ var clickOutsideEventName = "mousedown.outside-user-expansion",
 export default Discourse.View.extend(CleansUp, {
   elementId: 'user-expansion',
   classNameBindings: ['controller.visible::hidden', 'controller.showBadges'],
+  allowBackgrounds: Discourse.computed.setting('allow_profile_backgrounds'),
+
+  addBackground: function() {
+    var url = this.get('controller.user.expansion_background');
+    if (!this.get('allowBackgrounds')) { return; }
+
+    var $this = this.$();
+    if (!$this) { return; }
+
+    if (Ember.empty(url)) {
+      $this.css('background-image', '');
+    } else {
+      $this.css('background-image', "url(" + url + ")");
+    }
+  }.observes('controller.user.expansion_background'),
 
   _setup: function() {
     var self = this;