Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Eschersque CSS tiled background
$primary-color: #ddd;
$secondary-color: #eee;
$pattern-height: 60px;
$pattern-width: $pattern-height*1.8;
$sqrt-three: 265/153;
$sm-len: $pattern-width/12;
$bg-len: $pattern-width/6;
$filler-len: ceil($pattern-width/12*$sqrt-three);
body {
background:
linear-gradient(150deg, $primary-color $pattern-width/12, transparent 0px)0px 0px,
linear-gradient(150deg, $primary-color $pattern-width/6, transparent 0px)$pattern-width/2 0px,
linear-gradient(150deg, $primary-color $pattern-width/6, transparent 0px)0px $pattern-height/2,
linear-gradient(150deg, $primary-color $pattern-width/12, transparent 0px)$pattern-width/2 $pattern-height/2,
linear-gradient(330deg, $primary-color $pattern-width/6, transparent 0px)$pattern-width/3 $pattern-height/2,
linear-gradient(330deg, $primary-color $pattern-width/6, transparent 0px)$pattern-width*5/6 0px,
linear-gradient(60deg, $primary-color $filler-len, transparent 0px)0px 0px,
linear-gradient(240deg, $primary-color $filler-len, transparent 0px)$pattern-width/6 $pattern-height/2,
linear-gradient(60deg, $primary-color $filler-len, transparent 0px)$pattern-width/2 $pattern-height/2,
linear-gradient(240deg, $primary-color $filler-len, transparent 0px)$pattern-width*2/3 0px,
linear-gradient(210deg, $secondary-color $pattern-width/6, transparent 0px)$pattern-width/2 0px,
linear-gradient(210deg, $secondary-color $pattern-width/12, transparent 0px)0px 0px,
linear-gradient(210deg, $secondary-color $pattern-width/12, transparent 0px)$pattern-width/2 $pattern-height/2,
linear-gradient(210deg, $secondary-color $pattern-width/6, transparent 0px)0px $pattern-height/2,
linear-gradient(30deg, $secondary-color $pattern-width/6, transparent 0px)$pattern-width*2/3 $pattern-height/2,
linear-gradient(30deg, $secondary-color $pattern-width/6, transparent 0px)$pattern-width/6 0px,
linear-gradient(60deg, $secondary-color $filler-len, transparent 0px)$pattern-width/3 $pattern-height/2,
linear-gradient(240deg, $secondary-color $filler-len, transparent 0px)$pattern-width/2 0px,
linear-gradient(60deg, $secondary-color $filler-len, transparent 0px)$pattern-width*5/6 0px,
linear-gradient(240deg, $secondary-color $filler-len, transparent 0px)0px $pattern-height/2;
background-size:$pattern-width $pattern-height;
background-attachment: fixed;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment