Textured Backgrounds

By Corrie Haffly | November 1, 2004 | CSS

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

More Posts - Website

{ 6 comments }

essive November 25, 2004 at 5:42 pm: 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!
manoloweb November 18, 2004 at 4:40 pm: You can also look here:
http://www.squidfingers.com/patterns/
http://www.theinspirationgallery.com/
;-)
webfreebies November 2, 2004 at 8:39 am: The patterns at Kaliber1000 can be found at http://www.k10k.net/pages/matchmaker/.
charmedlover November 1, 2004 at 4:46 pm: 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.
Jonathan Snook November 1, 2004 at 4:42 pm: 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)
Thirteenva November 1, 2004 at 4:37 pm: 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.