diff --git a/layouts/index.html b/layouts/index.html
index f0765ce..f3963fb 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,22 +1,17 @@
 <html>
 <head>
-    <title>slate</title>
+    <title>{{ .Title }}</title>
     <link rel="stylesheet" href="css/slate.css">
 </head>
 
-<body>
+<body{{ if .Site.Params.BackgroundStyle }} style='{{ .Site.Params.BackgroundStyle | safeCSS }}'{{ end }}
+{{- if .Site.Params.BackgroundImages }} data-backgrounds='{{ range .Site.Params.BackgroundImages }}{{ . }},{{ end }}'{{- end }}>
 
 {{ partial "nav.html" . }}
 
 <div class="container">{{ partial "tile_slate.html" . }}
 </div>
 
-{{ if .Site.Data.page.backgrounds -}}
-<background data-backgrounds='{{ range .Site.Data.page.backgrounds }}
-            {{ . }},{{ end }}
-            '>
-{{- end }}
-
 </body>
 <link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet">
 <script src="js/slate.js"></script>
diff --git a/src/js/slate.js b/src/js/slate.js
index c14eab0..a9f8d60 100644
--- a/src/js/slate.js
+++ b/src/js/slate.js
@@ -262,7 +262,7 @@ var renderTiles = function() {
 renderTiles();
 
 var getBackgroundImages = function() {
-    var backgrounds = document.getElementsByTagName("background");
+    var backgrounds = document.getElementsByTagName("body");
     var images = [];
     if (backgrounds.length > 0) {
         var imgString = backgrounds[0].getAttribute("data-backgrounds");
diff --git a/static/js/slate.js b/static/js/slate.js
index 20075b7..b546c22 100644
--- a/static/js/slate.js
+++ b/static/js/slate.js
@@ -3463,7 +3463,7 @@ var renderTiles = function() {
 renderTiles();
 
 var getBackgroundImages = function() {
-    var backgrounds = document.getElementsByTagName("background");
+    var backgrounds = document.getElementsByTagName("body");
     var images = [];
     if (backgrounds.length > 0) {
         var imgString = backgrounds[0].getAttribute("data-backgrounds");
