Background Images

There are two basic ways to add a background image into the WordPress  default Twenty Eleven theme. One is have a full page background the other is to have a small image, usually a pattern that will ’tile’ across the page.

Full page background

The full page background image is simple in concept. I guesstimated, based upon the header dimensions, that a picture of 1400 pixels would fill the browser window. The key to using a large image is optimization.  Optimization is the method of making a picture file small enough to load quickly while keeping the picture itself large and of good viewing quality.

Optimization: file=small; picture=big (enough); quality=good.

There are plenty of easy ways to optimize a picture though it takes some basic understanding of photo editing software which is beyond the scope of this class. Ideally you can learn some of the basics of Photoshop or GIMP (Photoshop’s free cousin.) and be able to make very good optimizations. But in the short run there are some easier solutions:

These are online optimizers. The upside on these is that you don’t have to deal with or learn any software program. The downside is that you have to upload your images which can be time consuming. So if you are in a pinch and just need a few pictures optimized this may be the way to go.

These are free applications that are fairly easy to use and provide all the kinds of basic adjustments you’d want to do to your pictures to make them usable on your website. They may take a few hours to figure out how to use but in the long run it will greatly facilitate your ability to post images.

If you want some further understanding of what image optimization means I’ve found this site to have some good basic tips.

Tiled Background Image

The other method of using background image is if you want to have a pattern or textured background it can easily be achieved with a tiled image. This is the most common type of background for it provides a much more visually pleasing experience that a flat color background and it has the advantage over the full page picture of being able to be a fraction of their file size.  Tiled images are small in file size and small in pixel dimension, this is why the can load even quicker that the rest of your content. The way they work is that  a small image is graphically designed in such a way as to be able to repeat itself seamlessly across the page. This is the default way of using background images. Some background graphics are designed to repeat only vertically or horizontally (in Twenty-Eleven theme you have the option of tiling either way)

It takes some graphics arts skills to create a seamless tiles background but there are a handful of free patterns available. The best single site that I have found is Background Labs.

This post has already been read 2488 times!