diff --git a/guides/theming.md b/guides/theming.md
index 9f4fab0d2d44..305e6a39e7bd 100644
--- a/guides/theming.md
+++ b/guides/theming.md
@@ -40,6 +40,10 @@ The actual path will depend on your server setup.
 
 You can also concatenate the file with the rest of your application's css.
 
+Finally, if your app's content **is not** placed inside of a `md-sidenav-container` element, you
+need to add the `md-app-background` class to your wrapper element (for example the `body`). This
+ensures that the proper theme background is applied to your page.
+
 ### Defining a custom theme
 When you want more customization than a pre-built theme offers, you can create your own theme file.
 
@@ -98,7 +102,7 @@ secondary dark theme:
 
   $dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn);
 
-  @include angular-material-theme($dark-theme);   
+  @include angular-material-theme($dark-theme);
 }
 ```
 
diff --git a/src/lib/core/_core.scss b/src/lib/core/_core.scss
index 0df852437e9e..cc4c22ed2528 100644
--- a/src/lib/core/_core.scss
+++ b/src/lib/core/_core.scss
@@ -27,4 +27,11 @@
 @mixin md-core-theme($theme) {
   @include md-ripple-theme($theme);
   @include md-option-theme($theme);
+
+  // Wrapper element that provides the theme background when the
+  // user's content isn't inside of a `md-sidenav-container`.
+  .md-app-background {
+    $background: map-get($theme, background);
+    background-color: md-color($background, background);
+  }
 }