Position background differently on big screens

source/assets/css/foundation/_site.scss

@@ -1,10 +1,20 @@
-* { @include box-sizing(border-box); }
+* {
+  @include box-sizing(border-box);
+}
 
 @include establish-baseline;
 
-%reset-margin  { margin: 0; }
-%reset-border  { border: 0; }
-%reset-padding { padding: 0; }
+%reset-margin {
+  margin: 0;
+}
+
+%reset-border {
+  border: 0;
+}
+
+%reset-padding {
+  padding: 0;
+}
 
 %text {
   font-family: $font-family-text;
@@ -14,26 +24,46 @@
 html {
   @extend %text;
   overflow-x: hidden;
+
   text: {
     rendering: optimizeLegibility;
     align: center;
   }
-  background: image-url("textures/grey-prism.svg") center;
+
+  background: image-url('textures/grey-prism.svg');
   -webkit-tap-highlight-color: rgba($black, 0);
 
-  &.toolkit-baseline { @include debug-vertical-alignment; }
+  &.toolkit-baseline {
+    @include debug-vertical-alignment;
+  }
+
 }
 
-body { background: none; }
+body {
+  background: none;
+}
 
-@mixin theme-selection { background: $color-background-shade; }
-
-::-moz-selection { @include theme-selection; }
-::selection      { @include theme-selection; }
+@mixin theme-selection {
+  background: $color-background-shade;
+}
 
+::-moz-selection {
+  @include theme-selection;
+}
 
+::selection {
+  @include theme-selection;
+}
 
 @include breakpoint($tablet-large) {
-  html,
-  body { height: 100%; }
+
+  html, body {
+    height: 100%;
+  }
+
+  html {
+    background-repeat: repeat-x;
+    background-position: left top;
+  }
+
 }

source/assets/css/regions/_contentinfo.scss

@@ -2,6 +2,7 @@
   @include padding-leader;
   @include padding-trailer;
   color: $color-text-weak;
+  background: image-url('textures/grey-prism.svg') left top repeat-x;
 
   .container {
     @include padding-leader;
@@ -30,6 +31,7 @@
     &:hover,
     &:focus { color: $color-text-strong; }
   }
+  
 }
 
 .contentinfo-tools,