Changing your header background is an easy way to further customize the look of your WordPress site using the Shifter Theme System for WordPress.
Some Shifter skins use a header background image and some do not. Every skin can be customized to show a header background image even if the original version of the skin does not include a background image for the header.
For purposes of this example, we will change the header background image of the Resolution Skin packaged with your Shifter Theme System download. All of the techniques used in this tutorial are very simple and require no expert knowledge of CSS techniques. This method can be used on any skin.
Changing The Background Image
To change your header background image, locate the skin file for your active skin on your server and open the skin in a text editing program like Notepad or Text Wrangler. Your active skin file is the file listed in the drop down menu for the skin selection on your Shifter Settings page in your WordPress admin panel. In our example, we will open the /skins/resolution/brown.css file.
If your skin uses a background image for the header, your skin file will contain something similar to this
#hd {
background:url(images/doc_bg.gif) repeat-x;
}
If your skin does not use a header background image and you want to add one, copy the above code and paste it into your skin file.
The background image file in the above example is “images/doc_bg.gif”. Change the header background image by uploading a new background image to the /images/ sub-folder in your skin directory. If the skin you are editing does not have the /images/ sub-folder, create the sub-folder and place your background image in that folder.
After uploading your new header background image, change the “images/doc_bg.gif” in the above example to the name of the background header image you uploaded to your server and save your skin file. Your header background image has now been changed.
Best Practice For The Right Header Image
A few things to remember about placing a background image in your header, Shifter utilizes advanced techniques to make your page zoom perfectly. If visitors to your site press “CTRL” and “+” on a Windows PC or “⌘” and “+” on a Mac, all elements of your Shifter page will zoom (expand) perfectly. However, CSS limitations prevent background images from expanding or zooming properly.
To compensate for the inability of background images to expand in CSS, it is important to select the right background image for your header. Repeatable images work great. Repeatable images are images that appear as one larger, continuing image when placed side by side in a line or stacked one after the other horizontally.
If using a photograph for your background image, it is important to select the right type of photograph for your background to maintain a proper zoom. Photographs that have room to place a text logo are important for your header background image. It is best to select a photograph that is slightly larger than the actual size of your header area so that when your page zooms, the header image still looks great.
If you are using a fluid width layout, you must use either a repeatable image for your header or an image that is large enough to display correctly when your page is viewed by a visitor with a very wide monitor. The dimensions of the header background image in the Lizard skin downloaded with your copy of Shifter should be used as a guide if you are changing your background header image when using a fluid body width layout.
