diff --git a/Gemfile.lock b/Gemfile.lock
new file mode 100644
index 00000000000..43d8b2a3d44
--- /dev/null
+++ b/Gemfile.lock
@@ -0,0 +1,81 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    activesupport (4.2.8)
+      i18n (~> 0.7)
+      minitest (~> 5.1)
+      thread_safe (~> 0.3, >= 0.3.4)
+      tzinfo (~> 1.1)
+    addressable (2.4.0)
+    colorator (1.1.0)
+    faraday (0.11.0)
+      multipart-post (>= 1.2, < 3)
+    ffi (1.9.18)
+    forwardable-extended (2.6.0)
+    html-pipeline (2.5.0)
+      activesupport (>= 2)
+      nokogiri (>= 1.4)
+    i18n (0.8.1)
+    jekyll (3.2.1)
+      colorator (~> 1.0)
+      jekyll-sass-converter (~> 1.0)
+      jekyll-watch (~> 1.1)
+      kramdown (~> 1.3)
+      liquid (~> 3.0)
+      mercenary (~> 0.3.3)
+      pathutil (~> 0.9)
+      rouge (~> 1.7)
+      safe_yaml (~> 1.0)
+    jekyll-feed (0.7.2)
+    jekyll-gist (1.4.0)
+      octokit (~> 4.2)
+    jekyll-mentions (1.2.0)
+      activesupport (~> 4.0)
+      html-pipeline (~> 2.3)
+      jekyll (~> 3.0)
+    jekyll-sass-converter (1.5.0)
+      sass (~> 3.4)
+    jekyll-sitemap (0.11.0)
+      addressable (~> 2.4.0)
+    jekyll-watch (1.5.0)
+      listen (~> 3.0, < 3.1)
+    kramdown (1.13.2)
+    liquid (3.0.6)
+    listen (3.0.8)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+    mercenary (0.3.6)
+    mini_portile2 (2.1.0)
+    minitest (5.10.1)
+    multipart-post (2.0.0)
+    nokogiri (1.7.1)
+      mini_portile2 (~> 2.1.0)
+    octokit (4.6.2)
+      sawyer (~> 0.8.0, >= 0.5.3)
+    pathutil (0.14.0)
+      forwardable-extended (~> 2.6)
+    rb-fsevent (0.9.8)
+    rb-inotify (0.9.8)
+      ffi (>= 0.5.0)
+    rouge (1.11.1)
+    safe_yaml (1.0.4)
+    sass (3.4.23)
+    sawyer (0.8.1)
+      addressable (>= 2.3.5, < 2.6)
+      faraday (~> 0.8, < 1.0)
+    thread_safe (0.3.6)
+    tzinfo (1.2.3)
+      thread_safe (~> 0.1)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  jekyll (~> 3.2.1)
+  jekyll-feed
+  jekyll-gist
+  jekyll-mentions
+  jekyll-sitemap
+
+BUNDLED WITH
+   1.14.6
diff --git a/README.md b/README.md
index 5f398617a6b..afc500e5d57 100644
--- a/README.md
+++ b/README.md
@@ -1,14 +1,14 @@
-# Moon Jekyll Theme [![Donate](https://img.shields.io/badge/paypal-donate-blue.svg)](https://www.paypal.me/taylantatli/0usd)  
-  
-## `Sorry guys but there will be no update until I buy a new laptop.`
-    
-######(If you like this theme or using it, please give a :star: for motivation.)
+# Moon Jekyll Theme 
+
+### This fork adds to Moon theme an infinite scroll background image in home.
+##### This feature can be activated by _config.yml
 
 **[Moon](https://taylantatli.github.io/Moon)** is a minimal, one column jekyll theme.
 
 ## Features
 * Minimal, you can focus on your content
 * Responsive
+* Infinite Scroll Background Layer
 * Disqus integration
 * Syntax highlighting
 * Optional post image
@@ -25,6 +25,11 @@
 
 See a [live version of Moon](https://taylantatli.github.io/Moon) hosted on GitHub.
 
+## Preview with scroll background image
+
+The background scroll is implemented merging the background of [HTML5UP Aerial theme](https://html5up.net/aerial) with Moon Theme. 
+
+[![Example](https://img.youtube.com/vi/O_t78HIKoio/0.jpg)](https://www.youtube.com/watch?v=O_t78HIKoio)
 ## Getting Started
 
 To learn how to install and use this theme check out the [Setup Guide](https://taylantatli.github.io/Moon/moon-theme/) for more information.
diff --git a/_config.yml b/_config.yml
index 6579ac9c760..aa85c1a968d 100644
--- a/_config.yml
+++ b/_config.yml
@@ -5,10 +5,11 @@ description:        "Moon is a minimal, one column jekyll theme for your blog."
 reading_time:       true
 words_per_minute:   200
 logo:               'assets/img/logo.png'
-background:         'assets/img/placeholder-big.jpg'
+background:         #'assets/img/placeholder-big.jpg' #Leave empty to use background-color
+#background-color:   edit variables.scss to set background color
 tiled_bg:           false   # Set this true if you want to tile your background image, otherwise it will be covered
 locale:             en_US
-url:                https://taylantatli.github.io/Moon
+url:                http://127.0.0.1:4000
 
 # Jekyll
 permalink:          /:title/
@@ -25,6 +26,14 @@ sass:
   sass_dir:         _sass
   style:            compressed
 
+#Homepage Background Setting
+enableScrollBackground: true
+scrollImage:        'assets/img/bg_nosfondo.png'
+enableOverlay:      true #add overlay layer
+addScrollOnPageList: true #enable scroll image in pages that show a list of post/projects
+addScrollOnPostPage: false #enable scroll image in single post page
+addScrollOnProjectPage: true #enable scroll image in single project page
+
 # Comments
 disqus_shortname:   taylantatli
 
diff --git a/_layouts/home.html b/_layouts/home.html
index c8b1315f6b4..2afadd38171 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -10,7 +10,16 @@
     {% include head.html %}
 </head>
 <body>
+    {% if site.enableScrollBackground == true %}
+        <div id="bg" style="background: url({{ site.scrollImage }}) bottom left;"></div>
+        {% if site.enableOverlay == true %}
+        <div id="overlay" style="
+        background-image: url('assets/img/overlay-pattern.png'), url('assets/img/overlay.svg');"></div>
+        {% endif %}
+    {% endif %}
+    <!-- FINE BG -->
     {% include nav.html %}
+    
     <!-- Header -->
     <header class="header flex" role="banner">
         <div class="container animated fadeIn">
diff --git a/_layouts/post-list.html b/_layouts/post-list.html
index 405fd88dbfe..39792881fc1 100644
--- a/_layouts/post-list.html
+++ b/_layouts/post-list.html
@@ -10,6 +10,9 @@
     {% include head.html %}
 </head>
 <body>
+    {% if site.addScrollOnPageList == true %}
+        <div id="bg" style="background: url({{ site.url }}/{{ site.scrollImage }}) bottom left;"></div>
+    {% endif %}
     {% include nav.html %}
     <!-- Header -->
     <header class="header" role="banner">
diff --git a/_layouts/post.html b/_layouts/post.html
index 2d96014d3b7..a347ac56e1d 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -10,6 +10,9 @@
     {% include head.html %}
 </head>
 <body>
+    {% if site.addScrollOnPostPage == true %}
+        <div id="bg" style="background: url({{ site.url }}/{{ site.scrollImage }}) bottom left;"></div>
+    {% endif %}
     {% include nav.html %}
     <!-- Header -->
     <header class="header" role="banner">
diff --git a/_layouts/project.html b/_layouts/project.html
index bed126902ff..91b9daa2e1e 100644
--- a/_layouts/project.html
+++ b/_layouts/project.html
@@ -10,6 +10,9 @@
     {% include head.html %}
 </head>
 <body>
+    {% if site.addScrollOnProjectPage == true %}
+        <div id="bg" style="background: url({{ site.url }}/{{ site.scrollImage }}) bottom left;"></div>
+    {% endif %}
     {% include nav.html %}
     <!-- Header -->
     <header class="header" role="banner">
diff --git a/_sass/site.scss b/_sass/site.scss
index 74dce87c82c..8297c4510c3 100644
--- a/_sass/site.scss
+++ b/_sass/site.scss
@@ -220,3 +220,422 @@ header .entry-meta {
         background-position: center center;
     }
 }
+
+/* BACKGROUND SCROLL */
+#bg {
+		background-repeat: repeat-x !important;
+		-moz-animation: bg 60s linear infinite;
+		-webkit-animation: bg 60s linear infinite;
+		-ms-animation: bg 60s linear infinite;
+		animation: bg 60s linear infinite;
+		-moz-backface-visibility: hidden;
+		-webkit-backface-visibility: hidden;
+		-ms-backface-visibility: hidden;
+		backface-visibility: hidden;
+		-moz-transform: translate3d(0,0,0);
+		-webkit-transform: translate3d(0,0,0);
+		-ms-transform: translate3d(0,0,0);
+		transform: translate3d(0,0,0);
+		height: 100%;
+		left: 0;
+		opacity: 1;
+		position: fixed;
+		bottom: 0;
+	}
+
+	@-moz-keyframes bg {
+		0% {
+			-moz-transform: translate3d(0,0,0);
+			-webkit-transform: translate3d(0,0,0);
+			-ms-transform: translate3d(0,0,0);
+			transform: translate3d(0,0,0);
+		}
+
+		100% {
+			-moz-transform: translate3d(-2250px,0,0);
+			-webkit-transform: translate3d(-2250px,0,0);
+			-ms-transform: translate3d(-2250px,0,0);
+			transform: translate3d(-2250px,0,0);
+		}
+	}
+
+	@-webkit-keyframes bg {
+		0% {
+			-moz-transform: translate3d(0,0,0);
+			-webkit-transform: translate3d(0,0,0);
+			-ms-transform: translate3d(0,0,0);
+			transform: translate3d(0,0,0);
+		}
+
+		100% {
+			-moz-transform: translate3d(-2250px,0,0);
+			-webkit-transform: translate3d(-2250px,0,0);
+			-ms-transform: translate3d(-2250px,0,0);
+			transform: translate3d(-2250px,0,0);
+		}
+	}
+
+	@-ms-keyframes bg {
+		0% {
+			-moz-transform: translate3d(0,0,0);
+			-webkit-transform: translate3d(0,0,0);
+			-ms-transform: translate3d(0,0,0);
+			transform: translate3d(0,0,0);
+		}
+
+		100% {
+			-moz-transform: translate3d(-2250px,0,0);
+			-webkit-transform: translate3d(-2250px,0,0);
+			-ms-transform: translate3d(-2250px,0,0);
+			transform: translate3d(-2250px,0,0);
+		}
+	}
+
+	@keyframes bg {
+		0% {
+			-moz-transform: translate3d(0,0,0);
+			-webkit-transform: translate3d(0,0,0);
+			-ms-transform: translate3d(0,0,0);
+			transform: translate3d(0,0,0);
+		}
+
+		100% {
+			-moz-transform: translate3d(-2250px,0,0);
+			-webkit-transform: translate3d(-2250px,0,0);
+			-ms-transform: translate3d(-2250px,0,0);
+			transform: translate3d(-2250px,0,0);
+		}
+	}
+
+	#bg {
+		background-size: 2250px auto;
+		width: 6750px;
+	}
+
+/* Overlay */
+
+	@-moz-keyframes overlay {
+		0% {
+			opacity: 0;
+		}
+
+		100% {
+			opacity: 1;
+		}
+	}
+
+	@-webkit-keyframes overlay {
+		0% {
+			opacity: 0;
+		}
+
+		100% {
+			opacity: 1;
+		}
+	}
+
+	@-ms-keyframes overlay {
+		0% {
+			opacity: 0;
+		}
+
+		100% {
+			opacity: 1;
+		}
+	}
+
+	@keyframes overlay {
+		0% {
+			opacity: 0;
+		}
+
+		100% {
+			opacity: 1;
+		}
+	}
+
+	#overlay {
+		-moz-animation: overlay 1.5s 1.5s forwards;
+		-webkit-animation: overlay 1.5s 1.5s forwards;
+		-ms-animation: overlay 1.5s 1.5s forwards;
+		animation: overlay 1.5s 1.5s forwards;
+		background-attachment: fixed, fixed;
+		background-position: top left, center center;
+		background-repeat: repeat, no-repeat;
+		background-size: auto, cover;
+		height: 100%;
+		left: 0;
+		opacity: 0;
+		position: fixed;
+		top: 0;
+		width: 100%;
+	}
+
+/* Scroll on screen size */
+/* Normal */
+
+	@media screen and (max-width: 1280px) {
+
+		/* Basic */
+
+			body, input, select, textarea {
+				font-size: 12pt;
+			}
+
+		/* BG */
+
+			@-moz-keyframes bg {
+				0% {
+					-moz-transform: translate3d(0,0,0);
+					-webkit-transform: translate3d(0,0,0);
+					-ms-transform: translate3d(0,0,0);
+					transform: translate3d(0,0,0);
+				}
+
+				100% {
+					-moz-transform: translate3d(-750px,0,0);
+					-webkit-transform: translate3d(-750px,0,0);
+					-ms-transform: translate3d(-750px,0,0);
+					transform: translate3d(-750px,0,0);
+				}
+
+			}
+
+		@-webkit-keyframes bg {
+			0% {
+				-moz-transform: translate3d(0,0,0);
+				-webkit-transform: translate3d(0,0,0);
+				-ms-transform: translate3d(0,0,0);
+				transform: translate3d(0,0,0);
+			}
+
+			100% {
+				-moz-transform: translate3d(-750px,0,0);
+				-webkit-transform: translate3d(-750px,0,0);
+				-ms-transform: translate3d(-750px,0,0);
+				transform: translate3d(-750px,0,0);
+			}
+		}
+
+		@-ms-keyframes bg {
+			0% {
+				-moz-transform: translate3d(0,0,0);
+				-webkit-transform: translate3d(0,0,0);
+				-ms-transform: translate3d(0,0,0);
+				transform: translate3d(0,0,0);
+			}
+
+			100% {
+				-moz-transform: translate3d(-750px,0,0);
+				-webkit-transform: translate3d(-750px,0,0);
+				-ms-transform: translate3d(-750px,0,0);
+				transform: translate3d(-750px,0,0);
+			}
+		}
+
+		@keyframes bg {
+			0% {
+				-moz-transform: translate3d(0,0,0);
+				-webkit-transform: translate3d(0,0,0);
+				-ms-transform: translate3d(0,0,0);
+				transform: translate3d(0,0,0);
+			}
+
+			100% {
+				-moz-transform: translate3d(-750px,0,0);
+				-webkit-transform: translate3d(-750px,0,0);
+				-ms-transform: translate3d(-750px,0,0);
+				transform: translate3d(-750px,0,0);
+			}
+		}
+
+		#bg {
+			background-size: 750px auto;
+			width: 2250px;
+		}
+	}
+
+/* Mobile */
+
+	@media screen and (max-width: 736px) {
+
+		/* Basic */
+
+			body {
+				min-width: 320px;
+			}
+
+			body, input, select, textarea {
+				font-size: 11pt;
+			}
+
+		/* BG */
+
+			@-moz-keyframes bg {
+				0% {
+					-moz-transform: translate3d(0,0,0);
+					-webkit-transform: translate3d(0,0,0);
+					-ms-transform: translate3d(0,0,0);
+					transform: translate3d(0,0,0);
+				}
+
+				100% {
+					-moz-transform: translate3d(-300px,0,0);
+					-webkit-transform: translate3d(-300px,0,0);
+					-ms-transform: translate3d(-300px,0,0);
+					transform: translate3d(-300px,0,0);
+				}
+
+	}
+
+		@-webkit-keyframes bg {
+			0% {
+				-moz-transform: translate3d(0,0,0);
+				-webkit-transform: translate3d(0,0,0);
+				-ms-transform: translate3d(0,0,0);
+				transform: translate3d(0,0,0);
+			}
+
+			100% {
+				-moz-transform: translate3d(-300px,0,0);
+				-webkit-transform: translate3d(-300px,0,0);
+				-ms-transform: translate3d(-300px,0,0);
+				transform: translate3d(-300px,0,0);
+			}
+			}
+
+		@-ms-keyframes bg {
+			0% {
+				-moz-transform: translate3d(0,0,0);
+				-webkit-transform: translate3d(0,0,0);
+				-ms-transform: translate3d(0,0,0);
+				transform: translate3d(0,0,0);
+			}
+
+			100% {
+				-moz-transform: translate3d(-300px,0,0);
+				-webkit-transform: translate3d(-300px,0,0);
+				-ms-transform: translate3d(-300px,0,0);
+				transform: translate3d(-300px,0,0);
+			}
+		}
+
+		@keyframes bg {
+			0% {
+				-moz-transform: translate3d(0,0,0);
+				-webkit-transform: translate3d(0,0,0);
+				-ms-transform: translate3d(0,0,0);
+				transform: translate3d(0,0,0);
+			}
+
+			100% {
+				-moz-transform: translate3d(-300px,0,0);
+				-webkit-transform: translate3d(-300px,0,0);
+				-ms-transform: translate3d(-300px,0,0);
+				transform: translate3d(-300px,0,0);
+			}
+		}
+
+		#bg {
+			background-size: 300px auto;
+			width: 900px;
+		}
+
+	/* Header */
+
+		#header h1 {
+			font-size: 2.5em;
+		}
+
+		#header p {
+			font-size: 1em;
+		}
+
+		#header nav {
+			font-size: 1em;
+		}
+
+			#header nav a:hover {
+				font-size: 1em;
+			}
+
+			#header nav a:active {
+				font-size: 1em;
+			} }
+
+/* Mobile (Portrait) */
+
+	@media screen and (max-width: 480px) {
+
+		/* BG */
+
+			@-moz-keyframes bg {
+				0% {
+					-moz-transform: translate3d(0,0,0);
+					-webkit-transform: translate3d(0,0,0);
+					-ms-transform: translate3d(0,0,0);
+					transform: translate3d(0,0,0);
+				}
+
+				100% {
+					-moz-transform: translate3d(-412.5px,0,0);
+					-webkit-transform: translate3d(-412.5px,0,0);
+					-ms-transform: translate3d(-412.5px,0,0);
+					transform: translate3d(-412.5px,0,0);
+				}
+
+			}
+
+		@-webkit-keyframes bg {
+			0% {
+				-moz-transform: translate3d(0,0,0);
+				-webkit-transform: translate3d(0,0,0);
+				-ms-transform: translate3d(0,0,0);
+				transform: translate3d(0,0,0);
+			}
+
+			100% {
+				-moz-transform: translate3d(-412.5px,0,0);
+				-webkit-transform: translate3d(-412.5px,0,0);
+				-ms-transform: translate3d(-412.5px,0,0);
+				transform: translate3d(-412.5px,0,0);
+			}
+		}
+
+		@-ms-keyframes bg {
+			0% {
+				-moz-transform: translate3d(0,0,0);
+				-webkit-transform: translate3d(0,0,0);
+				-ms-transform: translate3d(0,0,0);
+				transform: translate3d(0,0,0);
+			}
+
+			100% {
+				-moz-transform: translate3d(-412.5px,0,0);
+				-webkit-transform: translate3d(-412.5px,0,0);
+				-ms-transform: translate3d(-412.5px,0,0);
+				transform: translate3d(-412.5px,0,0);
+			}
+		}
+
+		@keyframes bg {
+			0% {
+				-moz-transform: translate3d(0,0,0);
+				-webkit-transform: translate3d(0,0,0);
+				-ms-transform: translate3d(0,0,0);
+				transform: translate3d(0,0,0);
+			}
+
+			100% {
+				-moz-transform: translate3d(-412.5px,0,0);
+				-webkit-transform: translate3d(-412.5px,0,0);
+				-ms-transform: translate3d(-412.5px,0,0);
+				transform: translate3d(-412.5px,0,0);
+			}
+		}
+
+		#bg {
+			background-size: 412.5px auto;
+			width: 1237.5px;
+		}
+	}
\ No newline at end of file
diff --git a/_sass/variables.scss b/_sass/variables.scss
index 237bb659831..e42fcdb707b 100644
--- a/_sass/variables.scss
+++ b/_sass/variables.scss
@@ -1,5 +1,5 @@
 //colors
-$bodycolor           : #D24D57;
+$bodycolor           : #348cb2;
 $black           	 : #000;
 $white               : #fff;
 $color_gray          : #e8e8e8;
@@ -38,3 +38,4 @@ $small               : "only screen and (max-width: 30em)";
 $medium              : "only screen and (min-width: 30.1em) and (max-width: 48em)";
 $large               : "only screen and (min-width: 48.1em) and (max-width: 62.5em)";
 $notsmall            : "only screen and (min-width: 48em)";
+$ltmedium            : "only screen and (min-width: 30.1em)"
diff --git a/assets/img/bg_nosfondo.png b/assets/img/bg_nosfondo.png
new file mode 100644
index 00000000000..bd486f3b1a3
Binary files /dev/null and b/assets/img/bg_nosfondo.png differ
diff --git a/assets/img/overlay-pattern.png b/assets/img/overlay-pattern.png
new file mode 100644
index 00000000000..601eeaa57db
Binary files /dev/null and b/assets/img/overlay-pattern.png differ
diff --git a/assets/img/overlay.svg b/assets/img/overlay.svg
new file mode 100644
index 00000000000..b591c885a6d
--- /dev/null
+++ b/assets/img/overlay.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000px" height="1000px" viewBox="0 0 1000 1000" zoomAndPan="disable">
+    <style type="text/css"><![CDATA[
+		line {
+			stroke: rgba(255,255,255,0.45);
+			stroke-width: 0.5px;
+		}
+		
+		polygon.one {
+			fill: rgba(255,255,255,0.225);
+		}
+		
+		polygon.two {
+			fill: rgba(255,255,255,0.15);
+		}
+		
+		polygon.three {
+			fill: rgba(255,255,255,0.075);
+		}
+		
+    ]]></style>
+	<polygon class="one" points="-350,0 650,1000 0,1000 0,0" />
+	<polygon class="two" points="0,0 1000,1000 0,1000 0,0" />
+	<polygon class="three" points="350,0 1350,1000 0,1000 0,0" />
+	<line x1="-350" y1="0" x2="650" y2="1000" />
+	<line x1="0" y1="0" x2="1000" y2="1000" />
+	<line x1="350" y1="0" x2="1350" y2="1000" />
+</svg>
\ No newline at end of file
diff --git a/assets/img/scroll.jpg b/assets/img/scroll.jpg
new file mode 100644
index 00000000000..759f6de0233
Binary files /dev/null and b/assets/img/scroll.jpg differ
diff --git a/assets/js/scripts.js b/assets/js/scripts.js
index 40fd7073efe..b2c7e508afe 100644
--- a/assets/js/scripts.js
+++ b/assets/js/scripts.js
@@ -16,7 +16,7 @@ $(function() {
 });
 
 // All others
-$(document).ready(function() {
+window.onpageshow(function() {
     // zoom in/zoom out animations
     if ($(".container").hasClass('fadeOut')) {
         $(".container").removeClass("fadeOut").addClass("fadeIn");