This tutorial came to form for the sole purpose that I did an experiment that combined this technique and CSS Parallax ( which you can read here ) and realized that I should have created a more in-depth article on how to achieve this affect. In short this is a tutorial on generating organic randomness with CSS to create seamless titles.
What I did was created three square, semi-transparent PNGs of 11px by 11px, 29px by 29px, and 53px by 53px, and set them up as multiple backgrounds on the HTML element of a test page.
1.png ( ~4.0kb ) 
2.png ( ~4.0kb ) 
3.png ( ~4.0kb )
html {
background-image: url('3.png'),url('2.png'),url('1.png');
padding:0;
margin:0;
height: 100%;
}
And the results are in…
Using the transparencies, you can see the tiles overlap and interact together created new patterns and colors. And being that we are using prime numbers, it will be quite some time before the pattern will be repeated. If you’d like to do the math on how long it would take before it starts to repeat than it’s 11px x 29px x 53px… 16,907px!
To break it down for you – that’s less than 12kb in total in graphics that generate an area of unique texture just shy of 17,000 pixels wide.
And you aren’t limited to just three. You can keep adding layers of tiling and it will grow.
Browser Support
This is supported by all the current browsers ( Firefox 4, Safari 5, IE9, Chrome 10, Opera 11 ), but obviously not all older browsers.
