eFrog Digital Design |

Ok, heres a little disclaimer: this is a simple post just to show you how to quickly and easily change the look of your site, even if you have little experience or knowhow with css or background images.

The wrong background used on the the wrong site will look very ugly. So firstly, here are a few tips:

Make sure that your site is suited to a background image

If your site already has a lot going on visually, then adding a background may make it compete with the actual content of the site, as well as make the site in general look more cluttered and confusing to the user. So its probably best to have a relatively minimal site to start.

If in doubt, be subtle

This leads on from the first point. The idea is to enhance the content, not to compete with it. So dont use anything thats extremely bold or distracting. Bring out your classy side.

Understand your colour palette

If your site’s colour palette consists of shades of blues and greens, adding a red background texture is probably unwise. It needs to blend in to the existing palette so that doesn’t draw too much attention or clash with other elements on the page. Taking a colour from the existing palette, then making it slightly lighter or muted would be a far better idea.

Getting started

Firstly, we need an image that will tile (i.e repeat seamlessly). If you’ve got some Photoshop skills, you can of course make the image yourself, or alternatively you can Google for some already-made ones.

Your site
I’ve decided to use our theme Mojo as an example. Using the white/blue colour option as a base, I decided to use a texture that was a more muted, lighter blue than the calls to attention, yet had enough colour to differentiate it from the themes’s grey/beige action boxes.

So here are three different versions with three subtle texture differences:

So it pretty much appears like a lighter colour overlay with a faint texture. Here are the three images in a zip if you want them.

Adding them to your site

Find your theme or website’s images folder. It should be called images or img. Move or copy your background image into that folder. Next, locate your style sheet – it’s usually called style.css. Open it up with a text editor. We want to edit the ‘body’ property. When you find it, we want to simply add in the line for the new background-image:

Remember, only add this in. Leave in any other existing properties. Save your file, load up your site, and it should have a new background!