Tiling Background Image

Today, let’s tackle your background.

Sure you can use the Design Options and set the background color. And if you’re feeling really adventurous you can even check the box that adds a cool shadow effect to the site. (this keys off your background color to create the shadow effect)

But what about adding a tiling image to your background? This page has a custom tiling background, here’s how you can do it. (you can also do it for a particular post, more on that in a moment)

Enter custom.css – and a little bit of code. (don’t worry, it’s not hard to work with…)

First you’ll need an image to use as your background. Check out this site for generating background patterns: bgpatterns.com (warning this site can be fun and you might find you spent more time there than you intended) and download your background. This site’s backgrounds are nice – because they seamlessly tile to create a background. Small file sizes create really striking looks.

Got your background? Good. You can rename the file to something easier to work with – if you downloaded from the bgpattern site – it will be a randomly generated name beginning with patt_. You’ll need to ftp or upload it to your web server. It belongs in the wp-content/themes/thesis/custom/images folder.

Now for custom.css. Go to the custom file editor in Thesis and you should see the the custom.css file there ready to edit.

Here’s what you’ll paste in:

body.custom  {
  background:#F3F7FB url(images/wpa-clouds.jpg) repeat-x;
}

Now change the name of the image to your background image’s name. That works for all the pages on your site – but what if you want to assign a special background to a particular page? Thesis makes that easy, actually!  For example, say you have a page called “services”. You can apply a different background on this page by using this css, because Thesis adds a css class for each page of your site. (home would be home, contact would be contact, basically whatever you entered in as the page’s name in the permalink or slug field.

body.tiling-background-thesis {
 background:#F3F7FB url(images/patterntile.jpg) repeat;
}

If you wanted to – you could even apply different backgrounds to your category pages of your blog – the classes for these are created like this: cat_categoryname – so if you had a category called Beaches, it would be cat_beaches.

If you decide to apply this to a post, there’s one more step – after you’ve created your style, note what the class name is – that’s the part after the dot. Then edit your post, look in the SEO Details and Additional Style section for the  CSS Class field, add your class there (no dot) and update your post. That’s how I got the different background on this post! Easy!

There’s a lot more customization you can do with this system – but this is one of the simplest and easiest changes you can do to your Thesis site.  Have fun!

What you can do: use a color scheme tool to test drive your color combination. These online tools make it easy (and fun) to try out all sorts of combinations. Some allow you to use an image as the basis for your scheme, others let you play with variations of colors, the color wheel and more.

Here’s 5 color scheme tools to help you generate a color palette for your site:

ColorHunter

Get a color palette based on an image upload or image url – or just browse those already uploaded. This one is fun to play with and I really like how it picks the colors out of the image.

Kuler by Adobe

Adobe’s online tool for color. Fun to browse through other’s submissions. View by most popular, highest rated, or random. You can download these palettes, for use in Adobe CS2 & CS3.

Colr.org

pick a color scheme from selections from images found on flickr, your own uploaded image or colors from specific websites. You pick from the colors found within the image.

Color Palette Generator at CSSdrive

Generate from an image. Upload an image and this tool generates several color schemes: light, medium, dark and a complete color selection.

Color Scheme Designer

Love this, choose a color and you can preview a page example – a complete mockup page using either a light or dark background.

Color influences mood and sends a message, tells a story – and if your story being told by your color choice doesn’t match up with what you’re trying to accomplish on your site – well you just made your job that much harder. Color symbolism is a huge subject on it’s own, we’ll leave that subject for another day.

Once you’ve pinned down your color scheme – then you can provide those colors to your web designer or plug them into your css yourself. Have fun exploring colors!