WordPress School: Background Images

A few days ago the tutorial was on changing and setting the header art in your test site. Today’s tutorial in Lorelle’s WordPress School free online course is about customizing your site with a background image or color.

Before I dive into the details, please note that things are a little confusing right now with WordPress.com sites where most of you should have your test site. In my WordPress in person class last night, half of the students did not have some of the WordPress Theme design elements under the Appearance menu, others did. WordPress.com a live testing ground for WordPress development and they have the ability to constrain testing to small groups of users. Sitting in a classroom teaching two different methods for the same goal is just a prime example of the challenges faced by WordPress educators and trainers. I’ll do my best here.

Look under Appearance in the WP-Admin menus. If you see Background and Theme Options, great. If you do not see both of these, you will modify the header art and background image/colors through the Customize feature. I will explain using the former as the latter is still a work in progress.

How to Change the Theme’s Background Image

In WordPress, the background image may be changed if the WordPress Theme activates the feature. The Twenty-Eleven Theme we are working with on the course test site offers the option to change the background image and color of the Theme.

To change the Theme’s background image:

1. Go to Appearance > Background
2. Select the image by clicking Browser to access an image on your computer’s hard drive and upload it or Choose Image to select one already uploaded to the Media Library
3. Choose from one or more of the Display Options to set the background image
4. Save changes and preview the front end view of your site

WordPress Background Image Display Options

Each WordPress Theme has the ability to not only turn on or off the ability to change the background in a WordPress Theme, but also control which options the user may select.

The Background Image Display Options are only visible after uploading a background image.

The following is a description of the most common background image options.

• Position: The position of the background image maybe aligned left, center, or right.
• Repeat: This sets the way the image is repeated in the background of the website.
  • No Repeat: The image is set per the position and does not repeat or tile in the background. This is ideal for a single large image or an image you wish to have sit in the right, left, or center of the background for branding.
  • Tile: When a background image is set to tile, the image is repeated across and down the background area virtually without end, filling the background image area.
  • Tile Horizontally: The background image repeats across the width of the background area.
  • Tile Vertically: The background image repeats down the length of the background area.
• Attachment: The options for Attachment are Scroll and Fixed. Scroll means the background image moves with the scrolling of the content down the web page. Fixed means the background image does not move and the content scrolls across it.
• Background Color: Whether you choose a background image or not, this is the color selector for choosing the background color of the site. You may select a color or use a web hexadecimal color to set the background color.

See the Custom Backgrounds support documentation on WordPress.com for more specifics.

In the gallery below I’ve set the background image of a fan in all the various display settings, from set to the right, left, and center to various tiling layouts. View each of the images to notice the differences between the various placements and tiling options.

Note the subtle differences between aligning the image right, center, and left in each position, giving you a bit of freedom to shift the background image around within the background behind the content block. Also note that images centered are completely covered by the content block with this WordPress Theme.

Another customization you may choose for the WordPress Theme is found in the Theme Options.

There, you have a choice of a light or dark color scheme. The light color scheme features black letters on a white content area background. The dark color scheme is the opposite, white letters on a black content area background color.

You may also change the link color under Theme Options.

Another Theme Option is the Default Layout, however, do not be fooled by this as many are. The Default Layout represents the layout of the front page not every web page on the site. It should be titled “Front Page Layout.”

Things to Consider When Creating a Background Image

Choosing the right background image requires careful thought and design considerations including answering the questions:

• Is the background image critical to my site’s purpose or decoration?
• Does the background image blend in and match the header art?
• Does the message of the site lose its impact when the background image is not or barely visible?

Other things you need to take into consideration are:

• Image Size: A tiny image tiled in the background may be a perfect design choice. It could also make the site look busy. Choosing the right size for your background image depends upon how you wish the image to look and the artistic effect.
• File Size: As with all images, the larger the file size, the slower the page loads and the longer it takes for the background image to display. Large file sized images are often not seen as the visitor may leave before it finishes loading.
• Seamless Background Images: There are many images available on the web to create a seamless background, a repeating pattern that blends in as a whole tiled as the background image. You can also make seamless images with your own graphics with a little graphic ability and time.

In a recent project at Clark College where I teach WordPress and web tech and publishing, the college is doing an exciting Common Read project where a single book is selected for incorporation into the various classes and degree programs. The chosen book is “Garbology: Our Dirty Love Affair with Trash” by Edward Hume. I was asked to set up several WordPress.com sites for the project and have my WordPress class complete the design.

This is the first design I set up as temporary for the site for the campus wide project focused on students.

After much discussion and presentation of ideas, my WordPress college course students decided they liked the concept of the well-traveled coffee cup for the design symbolism of the site.

In the book, the author talks about how cardboard boxes and coffee cups are made in China, shipped over the sea to where coffee shops around the world dispense coffee. We buy it, drink it, and if we are living well, dispose of the coffee cup in a recycle bin where the shop or whomever handles it properly, which results in having the cups put on a ship back to China where they are recycled, made into coffee cups, which are shipped to where coffee shops dispense coffee. We buy it, drink it…get the picture. So did they.

The background design and header art told the story. The header art represented the leaking garbage bags and compressed trash matter, highlighted with a garbage bag and spilled coffee cup.

The background image was more problematic and typical of styling a background image behind a block of content.

Most WordPress Themes style the content background area as a solid color for the sake of readability. Positioning the background image so it is an integral part of the design and not lost behind the big white block is harder than you might think.

Student Dmitry Shabura redid the background image repeatedly to space the distance between the countries, represented by the ocean’s divide, in order to push the graphics of the countries out beyond the edges of the content overlay. Visit Garbology Common Read Project at Clark College and you will see the challenge, shown below.

Once on the site, zoom out (CTRL/CMD+ Plus to zoom out or Minus to zoom in) to see the full image and get a feel for how hard the team had to work to manipulate the background image.

Another student a few years ago, Ruben Rova, didn’t let the constrains of the Twenty-Eleven WordPress Theme get in his way. He switched from the light Theme option to the dark Theme option and blended the header art with the background image to create a uniform and powerful site design.

Working with the header art, background image, and WordPress Theme options allows you to customize the look and feel of your site in many ways, often with little or no design experience, so fear not. Boldly experiment with this on your test site.

Assignment

Your assignment is to experiment with your site’s basic design customization by changing the header art, background image, and Theme options.

If you are playing around with various images, I recommend you take screenshots and notes of each experiment along the way just in case you realize 12 design attempts later that design number 4 actually was a good idea.

When you are ready for your fellow participants to take a look, let us know in the WordPress School Google+ Community post for this assignment. We’ll be ready to give it a look and cheer you on or shudder, but either way, we all learn!

This is a tutorial from Lorelle’s WordPress School. For more information, and to join this free, year-long, online WordPress School, see:

• Lorelle’s WordPress School Introduction
• Lorelle’s WordPress School Description
• WordPress School Tutorials List
• WordPress School Google+ Community
• WordPress Publishing Checklist
• How to Give Feedback and Criticism

---