Use different approach for background image

app/assets/javascripts/discourse/controllers/application.js.es6

@@ -1,9 +1,3 @@
 export default Ember.Controller.extend({
   styleCategory: null,
-
-  backgroundClass: function() {
-    var id = this.get('styleCategory.id');
-    if (Em.isNone(id)) { return; }
-    return "category-" + this.get('styleCategory.id');
-  }.property('styleCategory')
 });

app/assets/javascripts/discourse/views/application.js.es6

@@ -0,0 +1,15 @@
+export default Ember.View.extend({
+  _appendCategoryClass: function(obj, key) {
+    var newClass = Em.get(obj, key);
+    if (newClass) {
+      $('body').addClass('category-' + newClass);
+    }
+  }.observes('controller.styleCategory.id'),
+
+  _removeOldClass: function(obj, key) {
+    var oldClass = Em.get(obj, key);
+    if (oldClass) {
+      $('body').removeClass('category-' + oldClass);
+    }
+  }.observesBefore('controller.styleCategory.id')
+});

app/assets/stylesheets/common/base/discourse.scss

@@ -22,7 +22,10 @@ a.no-href {
 }
 
 body {
-    button.ok {
+  background-attachment: fixed;
+  background-size: cover;
+
+  button.ok {
     background: $success;
     color: $secondary;
     @include hover {

app/assets/stylesheets/desktop/header.scss

@@ -30,8 +30,6 @@
 
 #main-outlet {
   padding-top: 82px;
-  background-repeat: no-repeat;
-  background-position: 0 0;
 }
 
 // Dropdowns

lib/sass/discourse_sass_importer.rb

@@ -50,7 +50,7 @@ class DiscourseSassImporter < Sass::Importers::Filesystem
       contents = ""
       Category.where('background_url IS NOT NULL').each do |c|
         if c.background_url.present?
-          contents << "#main-outlet.category-#{c.id} { background-image: url(#{c.background_url}) }\n"
+          contents << "body.category-#{c.id} { background-image: url(#{c.background_url}) }\n"
         end
       end
       return Sass::Engine.new(contents, options.merge(