HTML5 and CSS3 Advent 2011

Patterns, patterns, patterns

Using tileable images as backgrounds in webdesign have been around since we built websites with tables. The available image formats have changed through the years and we got more control of how the background is placed by means of CSS. With the introduction of gradients in CSS3, in combination with multiple backgrounds, it became possible to create background patterns in pure CSS.

Examplers

Change the color to see the dynamic nature of the gradients.

Very nice plaid pattern
Psychedelic checkerboard

How does it work?

By layering gradients upon each other with varying background-size and background-position, we can create the patterns above.

One of the techniques we used on the checkerboard pattern is to "build" the pattern by using triangles. We use background-position to offset the different triangle-gradients so they match when they repeat and combined display a square.

Some drawbacks

Even though the above technique is cool, there are some drawbacks.

  • Rendering of diagonal gradients with a hard "edge" is terrible in all browsers because there is no anti-aliasing. This is clearly visible in the "plaid" example.
  • The size of the CSS declaration for the gradient increases by 5 times it's original size because we have to add all the gradients with the different vendor prefixes.
  • There are quite some limitations to what patterns you can make, and creating them costs a lot of time.

Show us the source!

Feel free to look around the different source files we used for this example.

Check out our all new HTML & CSS Advent 2012