csssecrets

/**
 * Vertical stripes
 */

background: linear-gradient(to right, #fb3 50%, #58a 0);
background-size: 30px 100%;

csssecrets

/**
 * Polka dot
 */

background: #655;
background-image: radial-gradient(tan 20%, transparent 0),
                  radial-gradient(tan 20%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;

csssecrets

/**
 * Blueprint grid
 */

background: #58a;
background-image: linear-gradient(white 2px, transparent 0),
                  linear-gradient(90deg, white 2px, transparent 0),
                  linear-gradient(hsla(0,0%,100%,.3) 1px, transparent 0),
                  linear-gradient(90deg, hsla(0,0%,100%,.3) 1px, transparent 0);
background-size: 50px 50px, 50px 50px,

csssecrets

/**
 * Inner rounding
 */

div {
	outline: .6em solid #655;
	box-shadow: 0 0 0 .4em #655; /* todo calculate max of this */
	
	max-width: 10em;
	border-radius: .8em;

csssecrets

/**
 * Subtle stripes
 */

background: #58a;
background-image: repeating-linear-gradient(30deg, 
              hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px,
              transparent 0, transparent 30px);

height: 100vh;

csssecrets

/**
 * Diagonal stripes - repeating-linear-gradient() method
 */

background: repeating-linear-gradient(60deg, 
              #fb3, #fb3 15px,
              #58a 0, #58a 30px);

height: 100%;

csssecrets

/**
 * Diagonal stripes - linear-gradient() method
 */

background: linear-gradient(45deg, 
              #fb3 25%, #58a 0, #58a 50%,
              #fb3 0, #fb3 75%, #58a 0);
background-size: 42.4px 42.4px;

csssecrets

/**
 * Vertical stripes
 */

background: linear-gradient(to right, #fb3 50%, #58a 0);
background-size: 20px 100%;

csssecrets

/**
 * Horizontal stripes
 */

background: linear-gradient(#fb3 50%, #58a 0);
background-size: 100% 30px;

csssecrets

/**
 * Flexible background positioning
 * via calc()
 */

div {
	background: url(http://csssecrets.io/images/code-pirate.svg)
	            no-repeat bottom right #58a;
	background-position: calc(100% - 20px) calc(100% - 10px);