diff --git a/app/assets/javascripts/discourse/mixins/add-category-class.js.es6 b/app/assets/javascripts/discourse/mixins/add-category-class.js.es6
index b0fd0544e7f..eb2cee215b0 100644
--- a/app/assets/javascripts/discourse/mixins/add-category-class.js.es6
+++ b/app/assets/javascripts/discourse/mixins/add-category-class.js.es6
@@ -1,23 +1,23 @@
-// Mix this in to a view that has a `categoryId` property to automatically
+// Mix this in to a view that has a `categorySlug` property to automatically
 // add it to the body as the view is entered / left / model is changed.
 // This is used for keeping the `body` style in sync for the background image.
 export default {
-  _observeOnce: function() { this.get('categoryId'); }.on('init'),
+  _enterView: function() { this.get('categorySlug'); }.on('init'),
 
   _removeClasses: function() {
     $('body').removeClass(function(idx, css) {
-      return (css.match(/\bcategory-\d+/g) || []).join(' ');
+      return (css.match(/\bcategory-[^\b]+/g) || []).join(' ');
     });
   },
 
   _categoryChanged: function() {
-    var categoryId = this.get('categoryId');
+    var categorySlug = this.get('categorySlug');
     this._removeClasses();
 
-    if (categoryId) {
-      $('body').addClass('category-' + categoryId);
+    if (categorySlug) {
+      $('body').addClass('category-' + categorySlug);
     }
-  }.observes('categoryId'),
+  }.observes('categorySlug'),
 
   _leaveView: function() { this._removeClasses(); }.on('willDestroyElement')
 };
diff --git a/app/assets/javascripts/discourse/views/navigation-category.js.es6 b/app/assets/javascripts/discourse/views/navigation-category.js.es6
index 76e0c1c0c34..35adfe4599c 100644
--- a/app/assets/javascripts/discourse/views/navigation-category.js.es6
+++ b/app/assets/javascripts/discourse/views/navigation-category.js.es6
@@ -1,5 +1,5 @@
 import AddCategoryClass from 'discourse/mixins/add-category-class';
 
 export default Em.View.extend(AddCategoryClass, {
-  categoryId: Em.computed.alias('controller.category.id'),
+  categorySlug: Em.computed.alias('controller.category.slug')
 });
diff --git a/app/assets/javascripts/discourse/views/topic.js.es6 b/app/assets/javascripts/discourse/views/topic.js.es6
index f2213de9a12..a54ac073863 100644
--- a/app/assets/javascripts/discourse/views/topic.js.es6
+++ b/app/assets/javascripts/discourse/views/topic.js.es6
@@ -15,7 +15,7 @@ var TopicView = Discourse.View.extend(AddCategoryClass, Discourse.Scrolling, {
   menuVisible: true,
   SHORT_POST: 1200,
 
-  categoryId: Em.computed.alias('topic.category.id'),
+  categorySlug: Em.computed.alias('topic.category.slug'),
 
   postStream: Em.computed.alias('controller.postStream'),