Skip to content

Instantly share code, notes, and snippets.

@kedano

kedano/scalablegs-css-tiled-bg.css

Created August 4, 2011 20:48
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save kedano/1126229 to your computer and use it in GitHub Desktop.
Save kedano/1126229 to your computer and use it in GitHub Desktop.
Download ZIP
Blueprint style tiled background with only CSS (scalable.gs)
Raw
scalablegs-css-tiled-bg.css
html{
background: repeat center;
background-color: #50555f;
/*WEBKIT*/
background-image:
/*VERTICAL LINES*/
-webkit-gradient(linear, left top, left bottom,
color-stop(0, rgba(255,255,255,.4)), color-stop(0.01, rgba(80,85,95,0)), color-stop(0.2, rgba(80,85,95,0)),
color-stop(0.2, rgba(255,255,255,.1)), color-stop(0.21, rgba(80,85,95,0)), color-stop(0.4, rgba(80,85,95,0)),
color-stop(0.4, rgba(255,255,255,.1)), color-stop(0.41, rgba(80,85,95,0)), color-stop(0.6, rgba(80,85,95,0)),
color-stop(0.6, rgba(255,255,255,.1)), color-stop(0.61, rgba(80,85,95,0)), color-stop(0.8, rgba(80,85,95,0)),
color-stop(0.8, rgba(255,255,255,.1)), color-stop(0.81, rgba(80,85,95,0)), color-stop(1, rgba(80,85,95,0))
),
/*HORIZONTAL LINES*/
-webkit-gradient(linear, left top, right top,
color-stop(0, rgba(255,255,255,.4)), color-stop(0.01, rgba(80,85,95,0)), color-stop(0.2, rgba(80,85,95,0)),
color-stop(0.2, rgba(255,255,255,.1)), color-stop(0.21, rgba(80,85,95,0)), color-stop(0.4, rgba(80,85,95,0)),
color-stop(0.4, rgba(255,255,255,.1)), color-stop(0.41, rgba(80,85,95,0)), color-stop(0.6, rgba(80,85,95,0)),
color-stop(0.6, rgba(255,255,255,.1)), color-stop(0.61, rgba(80,85,95,0)), color-stop(0.8, rgba(80,85,95,0)),
color-stop(0.8, rgba(255,255,255,.1)), color-stop(0.81, rgba(80,85,95,0)), color-stop(1, rgba(80,85,95,0))
);
/*SET WEBKIT BACKGROUND SIZE*/
-webkit-background-size: 100px 100px;
/*MOZILLA*/
background-image:
/*VERTICAL LINES*/
-moz-repeating-linear-gradient(top,
rgba(255,255,255,.4) 0px, rgba(255,255,255,0) 1px, rgba(80,85,95,0) 20px,
rgba(255,255,255,.1) 20px, rgba(255,255,255,0) 21px, rgba(80,85,95,0) 40px,
rgba(255,255,255,.1) 40px, rgba(255,255,255,0) 41px, rgba(80,85,95,0) 60px,
rgba(255,255,255,.1) 60px, rgba(255,255,255,0) 61px, rgba(80,85,95,0) 80px,
rgba(255,255,255,.1) 80px, rgba(255,255,255,0) 81px, rgba(80,85,95,0) 99px
),
/*HORIZONTAL LINES*/
-moz-repeating-linear-gradient(left,
rgba(255,255,255,.4) 0px, rgba(255,255,255,0) 1px, rgba(80,85,95,0) 20px,
rgba(255,255,255,.1) 20px, rgba(255,255,255,0) 21px, rgba(80,85,95,0) 40px,
rgba(255,255,255,.1) 40px, rgba(255,255,255,0) 41px, rgba(80,85,95,0) 60px,
rgba(255,255,255,.1) 60px, rgba(255,255,255,0) 61px, rgba(80,85,95,0) 80px,
rgba(255,255,255,.1) 80px, rgba(255,255,255,0) 81px, rgba(80,85,95,0) 99px
);
/*OPERA*/
background-image:
/*VERTICAL LINES*/
-o-repeating-linear-gradient(top,
rgba(255,255,255,.4) 0px, rgba(255,255,255,0) 1px, rgba(80,85,95,0) 20px,
rgba(255,255,255,.1) 20px, rgba(255,255,255,0) 21px, rgba(80,85,95,0) 40px,
rgba(255,255,255,.1) 40px, rgba(255,255,255,0) 41px, rgba(80,85,95,0) 60px,
rgba(255,255,255,.1) 60px, rgba(255,255,255,0) 61px, rgba(80,85,95,0) 80px,
rgba(255,255,255,.1) 80px, rgba(255,255,255,0) 81px, rgba(80,85,95,0) 99px
),
/*HORIZONTAL LINES*/
-o-repeating-linear-gradient(left,
rgba(255,255,255,.4) 0px, rgba(255,255,255,0) 1px, rgba(80,85,95,0) 20px,
rgba(255,255,255,.1) 20px, rgba(255,255,255,0) 21px, rgba(80,85,95,0) 40px,
rgba(255,255,255,.1) 40px, rgba(255,255,255,0) 41px, rgba(80,85,95,0) 60px,
rgba(255,255,255,.1) 60px, rgba(255,255,255,0) 61px, rgba(80,85,95,0) 80px,
rgba(255,255,255,.1) 80px, rgba(255,255,255,0) 81px, rgba(80,85,95,0) 99px
);
/*STANDARD*/
background-image:
/*VERTICAL LINES*/
repeating-linear-gradient(top,
rgba(255,255,255,.4) 0px, rgba(255,255,255,0) 1px, rgba(80,85,95,0) 20px,
rgba(255,255,255,.1) 20px, rgba(255,255,255,0) 21px, rgba(80,85,95,0) 40px,
rgba(255,255,255,.1) 40px, rgba(255,255,255,0) 41px, rgba(80,85,95,0) 60px,
rgba(255,255,255,.1) 60px, rgba(255,255,255,0) 61px, rgba(80,85,95,0) 80px,
rgba(255,255,255,.1) 80px, rgba(255,255,255,0) 81px, rgba(80,85,95,0) 99px
),
/*HORIZONTAL LINES*/
repeating-linear-gradient(left,
rgba(255,255,255,.4) 0px, rgba(255,255,255,0) 1px, rgba(80,85,95,0) 20px,
rgba(255,255,255,.1) 20px, rgba(255,255,255,0) 21px, rgba(80,85,95,0) 40px,
rgba(255,255,255,.1) 40px, rgba(255,255,255,0) 41px, rgba(80,85,95,0) 60px,
rgba(255,255,255,.1) 60px, rgba(255,255,255,0) 61px, rgba(80,85,95,0) 80px,
rgba(255,255,255,.1) 80px, rgba(255,255,255,0) 81px, rgba(80,85,95,0) 99px
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment