Creating a Background Pattern

WordPress 3.1 ships with the Twenty Ten theme. On my site after a standard install it looks like this. The gray background looks a little bland as you can see below.

This site - before

A simple solution to this that is WordPress, maintenance and theme friendly is to create a child theme which overrides the theme’s background. I won’t go into that detail here as I’m using this post to demonstrate one of the great generator tools that’s freely available and easy to use for basic design tasks.


I want to replace the default background with a dark-green repeating pattern that fits with the green tones implied by the header image I’ve installed on my site. bgpatterns.com is a way to create simple but effective background patterns for your site. Below is the control panel you are presented with.

The BgPatterns Background Patterns Maker

I’m going to use this to create a dark-green background with a subtle texture and less garish repeating bitmap. The first step is to define the foreground and background colors. Select the “Colors” control. I used this to select a dark background and a much lighter green foreground colour as shown below.


Selecting foreground and background colours

The next step is to select a canvas. I elected to use a subtle pattern (the second from the left) and reduce the opacity.

Selecting a canvas

A thought that a more subtle repeating bitmap would be appropriate. For this site I select a simple circular symbol. This is done from the “Image” control panel.



Selecting a symbol to use as the repeating pattern

You can use the “Eye tool” on each of the panels to preview the result. The tool will update the site’s own background pattern to see the effect.



Previewing the pattern

After setting up a child theme that overrides the background image and installing it on my site, this is the result.



The result

I’m happy with this result! One thing I really like about using tools like this is that they are often much less effort then firing up a image editing / drawing tool of some form. I use Adobe Fireworks CS3 on my Mac for more complex graphics / design tasks.

The main disadvantage of these online tools is that they don’t generally allow you to save a library of your graphics. You also need to be able to remember where to find the tool on the web. That’s one of the reasons for this blog and the forgetory tag I’ve established.

Enjoy!

No related posts.

This entry was posted in Web Development and tagged , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>