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:

http://csszengarden.com/?cssfile=/113/113.css&page=2

http://csszengarden.com/?cssfile=/102/102.css&page=4

http://csszengarden.com/?cssfile=/084/084.css&page=6

http://csszengarden.com/?cssfile=/075/075.css&page=7

http://csszengarden.com/?cssfile=/064/064.css&page=8

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.

Corrie Haffly
Corrie is the lead designer and developer for PixelMill and their in-house brand, jgtemplates. This would-be triathlete has a mathematics degree but wishes she had double-majored in computer science and art instead. Maybe next time...

  • 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: k10k.net 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)

  • http://www.lowter.com charmedlover

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

    http://www.k10k.net/

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

  • http://webzone5.tripod.com webfreebies

    The patterns at Kaliber1000 can be found at http://www.k10k.net/pages/matchmaker/.

  • http://www.ideasfreelance.com manoloweb
  • http://www.webprofessionaltemplates.com essive

    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!

Stay ahead of the game Exclusive content for developers and digital experts Go Premium