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:
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:
The answers to those questions determine how you install a background graphic in your theme design.
When working with graphics on the Web, we recommend using GIF, JPG, or PNG image formats. For images with a small number of colors (such as charts, line art, logos, and so on), GIF format works best. For other image types (screenshots with text and images, blended transparency, and so on), use JPG or PNG.
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:
If you want to change the background graphic in your theme, follow these steps:
Typically, the images folder can be found at wp-content/themes/themename/images.
The Theme Editor page displays.
The style.css template opens in the text editor box on the left side of the Theme Editor page.
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; }
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).
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.
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.
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.
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.
3.144.9.124