Changing Your Background Graphic

Using background graphics is an easy way to set your site apart from others that use the same theme. A background graphic for your site can be compared to finding just the right desktop background for your computer. You can choose from a variety of background graphics for your site the way you can for your computer desktop, such as photography, abstract art, and repeatable patterns.

You can find ideas for new and different background graphics by checking out some of the CSS galleries on the Web, such as http://cssdrive.com and http://csselite.com. Sites like these should be used for inspiration only, not theft. Be careful when using images from outside sources. You only want to use graphics and images that you have been given the right (through express permission or licenses that allow you to reuse) to use on your sites. For this reason, we suggest purchasing graphics from reputable sources. Three of our favorite online graphic sites include:

• iStockphoto (http://istockphoto.com): An extensive library of stock photography, vector illustrations, video and audio clips, and Flash media. You can sign up for an account and search through libraries of image files to find the image that suits you, or your client, best. The files that you use from iStockphoto aren't free; you do have to pay for them—and be sure that you read the license for each image you use from them. They have several different licenses. The cheapest one is their Standard License, which has some limitations. For example, you can use an illustration from iStockphoto in one Web site design, but you cannot use that same illustration in a theme design that you intend to sell multiple times (say in a premium theme marketplace). Be sure to read the fine print!
• Dreamstime (http://dreamstime.com): Dreamstime is a major supplier of stock photography and digital images. Sign up for an account and search through their huge library of digital image offerings. Dreamstime does offer free images, at times—so keep your eyes out for those! Also, Dreamstime has different licenses for their image files that you need to pay close attention to, but one nice feature is their Royalty Free licensing option. This option allows you to pay for the image one time and then use the image as many times as you like; however, you can't redistribute the image in the same Web site theme repeatedly, such as in a template that's sold to the public.
• Graphic River (http://www.graphicriver.net): Graphic River offers stock graphic files from Photoshop images, design templates, textures, vector graphics, and icons, to name just a few. Their selection is vast, and the cost to download and use their graphic files are minimal. As with all graphic and image libraries, be sure to read their terms of use or any licensing attached to each of the files to make sure you are legally abiding by their terms.

Another great resource for finding free graphics and more is Smashing Magazine at http://smashingmagazine.com. You'll find hundreds of links and resources to free and, often, reusable graphics, such as textures and wallpapers for your site.

To best use background graphics, you must answer a few simple questions:

• What type of background graphic do you want to use? For example, do you want a repeatable pattern or texture or an image like a black-and-white photograph of something in your business?
• How do you want the background graphic to display in your browser? Do you want to tile or repeat your background image in the browser window or pin it to a certain position no matter what size your guest's browser is?

The answers to those questions determine how you install a background graphic in your theme design.

For Web design, the characteristics of each image file format can help you decide which file format you need to use for your site. The most common image file formats and characteristics include:

• .jpg : Suited for use with photographs and smaller images used in your Web design projects. Although the .jpg format compresses with lossy compression, you can adjust compression when you save a file in a .jpg format. That is, you can choose the degree, or amount, of compression that will occur from 1 to 100. Usually, you won't see a great deal of image quality loss with compression levels 1 through 20.
• .png : Suited for larger graphics used in Web design, like the logo or main header graphic that helps brand the overall, visual look of the Web site. A .png file uses lossless image compression; therefore, no data loss occurs during compression, which creates a cleaner, sharper image. You can also create and save a .png file on a transparent canvas; .jpg files must have a white canvas or some other color that you designate.
• .gif : Compression of a .gif file is lossless; therefore, the image renders exactly the way you design it, without loss of quality. However, .gif files compress with lossless quality when the image uses 256 colors, or less. For images that use more colors (higher quality), .gif isn't the greatest format to use. We recommend using the .png format, instead.

Uploading an image for background use

If you want to change the background graphic in your theme, follow these steps:

1. Upload your new background graphic via FTP to the images folder in your theme directory.

   Typically, the images folder can be found at wp-content/themes/themename/images.

2. On the WordPress Dashboard, choose AppearanceEditor.

   The Theme Editor page displays.

3. Click the Stylesheet ( style.css ) link on the right side of the page.

   The style.css template opens in the text editor box on the left side of the Theme Editor page.

4. Scroll down to find the body CSS selector.

   We discuss CSS selectors later in this chapter, but the following code segment is a sample CSS snippet from the Twenty Ten theme. (How the body selector is defined differs from theme to theme.)

   body {
       background: #f1f1f1;
   }

5. Edit the background property values.

   Change this:

   background: #f1f1f1;

   To this:

   background-color: #FFFFFF;
   background-image: url('images/newbackground.gif'),

   In the above example, we added a new background image (newbackground.gif) to the existing code and changed the color code to white (#FFFFFF).

6. Click the Update File button to save the stylesheet changes you made.

   Your changes are saved and applied to your theme. Figure 4-1 shows a preview of the new background on the test site without any positioning.

Figure 4-1: A new background image on a blog.

Positioning, repeating, and attaching images

After you upload a background graphic, you can use CSS background properties to position it how you want it. The main CSS properties—background-position, background-repeat, and background-attachment—help you achieve the desired effect. Table 4-1 describes the CSS background properties and their available values for changing them in your theme stylesheet.

Table 4-1 CSS Background Properties

In the previous section, we upload a new background graphic, newbackground.gif. You can explore positioning it with some of the values provided in Table 4-1. If you're a visual person, You'll enjoy testing and tweaking values to see the effects on your site.

Say your goal is to tile, or repeat, the background image horizontally (see Figure 4-2), or across the browser screen from left to right so that it scales with the width of the browser on any computer. To achieve this, we open the stylesheet again and change

background: #f1f1f1;

to

background: #FFFFFF;
background-image: url(images/newbackground.gif);
background-repeat: repeat-x;

If your goal is to display a fixed image that does not scroll or move when your site visitor moves the browser, then you can use the background-position, background-repeat, and background-attachment properties to display it exactly how you want it to appear.

Figure 4-2: A background image repeating across the x-axis.

In Figure 4-3, the image is pinned to top left and fixed, so wherever the browser moves, the image stays in that exact place. To achieve the look, change background: #f1f1f1 in your stylesheet to

background: #FFFFFF;
background-image: url(images/newfixedbackground.gif);
background-position: top left;
background-attachment: fixed;
background-repeat: no-repeat;

As you can see from these examples, changing the background graphic by using CSS has a number of options that depends on your creativity and design style more than anything else. But properly leveraged, you can use this to take your design to the next level for yourself and your clients.