CSS pattern backgrounds

With CSS3 came pattern backgrounds. Unbelievably epic, and extraspecial cool. Sweet images without images! For example:

This is a diagonally striped, pure css background. Promise.

The trick is this:

    background-image: -webkit-gradient(linear, left bottom, right top, 
        color-stop(0, #f2f2f2), 
        color-stop(0.25, #f2f2f2), 
        color-stop(0.25, #eee), 
        color-stop(0.5, #eee), 
        color-stop(0.5, #f2f2f2), 
        color-stop(0.75, #f2f2f2), 
        color-stop(0.75, #eee));
    background-size: 30px 30px;

What this basically does is create a 30 by 30 repeatable graphic, linear from the left bottom to the right top. It is diagonally striped because the actual gradient doesn't have a gradient. The color adjustment is forced into a sharp line. If this 30 by 30 pixel pattern is repeated, it fills the element right up.

You can find an incredible amount of full css-based patterns in Lea Verou's Gallery.