Skip to content

Instantly share code, notes, and snippets.

@PeteDevoy
Created February 27, 2018 12:30
Show Gist options
  • Save PeteDevoy/c0926f4db951c2be6b3461c54cd2927f to your computer and use it in GitHub Desktop.
Save PeteDevoy/c0926f4db951c2be6b3461c54cd2927f to your computer and use it in GitHub Desktop.
Photoshop-style Chequerboard Background CSS
/* with 0 margin, 0 padding and sans-serif */
body {
margin:0;
padding:0;
background-image:
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #eee), color-stop(.25, transparent)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #eee), color-stop(.25, transparent)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #eee)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #eee));
background-size:10px 10px;
-webkit-background-size:10px 10.1px;
background-position:0 0, 5px 0, 5px -5px, 0px 5px;
font-family: sans-serif;
}
/*background only*/
body {
background-image:
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #eee), color-stop(.25, transparent)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #eee), color-stop(.25, transparent)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #eee)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #eee));
background-size:10px 10px;
-webkit-background-size:10px 10.1px;
background-position:0 0, 5px 0, 5px -5px, 0px 5px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment