By Corrie Haffly

Textured Backgrounds

By Corrie Haffly

A design trend among a lot of blog-type sites is what I’ll call the “textured background.” Here are a few examples that I grabbed from CSS Zen Garden:

You get the idea!

Some common characteristics:

1. The background repeats seamlessly.

2. The colors used in the background are usually of the same hue, just with different values (lightness/darkness) for a subtle effect that doesn’t distract your eye.

3. The main color of the background is usually also the main “base” color of the rest of the site design.

I like this design technique as it is a subtle and easy way to give a bit more personality to a web site. Plus it’s fast-loading.

  • Thirteenva

    I also like this for certain sites. I’ve typically made my own backgrounds for this purpose but wonder if there is a place where one can acquire these patterns freely.

  • Jonathan Snook

    Thirteenva: has a pattern section on their site with a slew of em. It might be hard to find but there’s a button in one of the boxes that says pixlpatterns (or something like that)

  • For patterns a really good designer I know gave me this link:

    I got some good stuff from here, but again making your own backgrounds pixel by pixel turns out better in the end.

  • The patterns at Kaliber1000 can be found at

  • Patterned backgrounds is a fantastic way to add a ‘warming’ dimension. The CSS Zen Garden examples are very good. Zen Garden is also one of the best web sites on separation of content and style. Very nice!

Get the latest in Front-end, once a week, for free.