diff --git a/css/mediarack.css b/css/mediarack.css
index 9f6c133adfa8982bd7ec1868b5b4ab9af2c7ba2a..9f63ce6d3056d5d0e46d02f1feba5f351df90253 100644
--- a/css/mediarack.css
+++ b/css/mediarack.css
@@ -4,13 +4,36 @@ html {
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: scroll;
+ background-color: none;
+ padding: 0px;
+ margin: 0px;
}
body {
padding-top: 70px;
font-family: 'Open Sans', sans-serif;
+
}
+#bg {
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ min-width: 100%;
+ min-height: 100%;
+ background: no-repeat center center fixed;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+ -webkit-filter: blur(5px);
+ -moz-filter: blur(5px);
+ -o-filter: blur(5px);
+ -ms-filter: blur(5px);
+ filter: blur(5px);
+}
+
+
.navbar-brand {
height: 50px;
padding-top: 0;
diff --git a/index.php b/index.php
index ffc0a5c70a33c6b1df48b714638ccee93286bba9..4bb3d9e60f13ed15de89b8d40345e723c5870d11 100644
--- a/index.php
+++ b/index.php
@@ -23,6 +23,8 @@ include_once 'config.php';
<body>
+ <div id="bg"></div>
+
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
diff --git a/js/mediarack.js b/js/mediarack.js
index b0f373aa8b458b210c6c6f0175921f8d2a225a74..b56c99dad703d70c1ef7298a7c08d3d943047f91 100644
--- a/js/mediarack.js
+++ b/js/mediarack.js
@@ -165,6 +165,9 @@ function getShows() {
});
divInfo.fadeTo(0, seasonOpacity);
divContainer.hover(function() {
+ $('#bg').stop(true).fadeTo('slow', 0, function() {
+ $('#bg').css('background-image', 'url('+cdn('show/'+cleanname(show.folder)+'/fanart.jpg')+')');
+ }).fadeTo('slow', 1);
divInfo.fadeTo(300, 1);
}, function() {
divInfo.fadeTo(300, seasonOpacity);
@@ -265,6 +268,9 @@ function getMovies() {
var divRating =$('<div class="movieRating text-right">IMDB Rating: '+movie.rating+'</div>');
divInfo.fadeTo(0, seasonOpacity);
divContainer.hover(function() {
+ $('#bg').stop(true).fadeTo('slow', 0, function() {
+ $('#bg').css('background-image', 'url('+cdn('movie/'+cleanname(movie.folder)+'/fanart.jpg')+')');
+ }).fadeTo('slow', 1);
divInfo.fadeTo(300, 1);
}, function() {
divInfo.fadeTo(300, seasonOpacity);