Textured Backgrounds


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.

Free JavaScript: Novice to Ninja Sample

Get a free 32-page chapter of JavaScript: Novice to Ninja and receive updates on exclusive offers from SitePoint.

  • 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:


    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!