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:

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

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