The WordPress training team creates downloadable lesson plans and related materials for instructors to use in live workshop environments. If you enjoy teaching people how to use and build stuff for WordPress, immediately stop what you’re doing and join our team!
Regardless of your skill set, you can help! We need people to write, copyedit, test, audit, connect, and review our lesson plans. Found out how to get started.
Many WordPress themes allow you to customize the appearance of your website by setting a header and background image. Using the Theme Customizer, you can easily preview the look and feel of using header and background images across your website, and then save the settings as you decide to use them.
Most WordPress themes support custom headers and background images that can be changed using the WordPress theme Customizer. This gives users more control and flexibility over the look of their site without having to implement a child theme and manage theme files manually. Themes typically include default images for the header and background as examples to display how the theme works.
Images may be selected from your existing Media Library collection, or you may upload images to use, which will be added to the Media library. While you have the ability to customize the theme header and background images with your own images, most themes have a recommended size for the header image specified in pixel dimensions. You’ll need to use a header image that has the right size, and you can prepare the image outside of WordPress or use the Customizer to crop the image to the proper size. Some themes have a flexible header layout that allows for varying dimensions and aspect ratios that do not need cropping, but you may need to try various image sizes to determine the best fit for the theme.
Typically, designers and developers toggle between back-end coding and front-end viewing in their work. The WordPress Theme Customizer allows you to change many aspects of the look and feel of your WordPress site, without having to toggle between backend and front end, nor having to modify the code of theme files. You can use the Customizer to preview and modify many of your site’s Appearance settings with ease and safety.
Tip: Themes may either use or not use certain features of the Customizer, as well as add new features depending upon the theme developer. If your theme does support the Customizer settings for this lesson, apply the standard Twenty Sixteen theme for practice. Afterwards, you can switch back to your original theme.
There are two ways to launch the Customizer, from the front end or back end of the WordPress site. On the front end of the site, when you are logged in, you’ll see the Customize icon and link in the Admin bar, which is the toolbar at the top of the website.
To launch the Customizer in the WordPress Dashboard, use Appearance > Customize. You may also see a big blue Customize Your Site button in the Welcome to WordPress section, if that screen option is turned on
The Header Image is displayed near the top of the layout throughout the website. Most themes support use of a header image, but each theme will use a specific size and placement for the image. Some themes allow for a Flexible Header that does not need to be a certain size, and some themes provide support for different headers on the home page and other sections of the website.
Does your theme support header and background images? And if so, what size is recommended for the header image?
After you launch the Customizer you should see both Header Image and Background Image in the Customizer menu panel, if your theme supports those options. Click on Header Image to open that section.
In the Customizing Header Image section, you’ll see what size is recommended for your theme. With the Twenty Sixteen theme, the WordPress Customizer indicates “your theme recommends a header size of 1200 × 280 pixels.” Make a note of this size—or whatever size you find for your theme—for the width by height in pixels that will be used for a header image.
Notice that nothing is shown under the labels for “Previously uploaded” and for “Suggested,” unless there are existing settings for your theme. Some themes include default images that will be shown as thumbnails for those items. Depending upon your theme, you may also see options to rotate through multiple headers on your website.
Select an image of your own or from a website with free-to-use or public domain images that you will use for your Header Image that is either:
The exact recommended size for your theme
Larger than the recommended size, so that it can be cropped
Alert: Only .jpeg, .gif, and .png files can be used. All cropped images will be converted to jpegs. Using an image of exactly the right size will produce the best results, and this is certainly recommended. To preserve transparency in an image use a .gif or .png image of exactly the right size.
Click the “Add new image” button in the Customizing Header Image in the Customizer panel.
In the Choose Image dialog select the Upload Files tab.
You may either “Drop files anywhere to upload” or click the Select Files button to upload an image from your computer.
Enter a short description for the Alt Text after the image is uploaded to the Media library.
Click the Select and Crop button.
In the Crop Image dialog use the small square handles to adjust the cropping defined by a dashed line.
Since the Twenty Sixteen theme allows for a flexible header, the recommended size is the minimum size recommended, and you can crop the image however you like or not at all. WordPress will save a new version of the cropped image, so you will retain the original image that was uploaded.
When you are finished adjusting the cropping, click the Crop Image button.
You’ll see the results displayed in both the the Customizing Header Image panel and the website preview panel.
Click the Save & Publish button to save your Header Image setting.
Background images and background colors have long been an aspect of HTML web design. Just as they are named, they appear behind other elements in the layout. While background images can be full-scale pictures, they are more often small images of textured patterns that can be repeated horizontally, vertically, or tiled.
Alert: The WordPress Customizer provides a basic background image setting for the entire website. However, themes may not apply the background with all templates throughout the website, and mobile views may not display as expected.
Select an image of your own or from a website with free-to-use or public domain images that has a pattern that could be repeated to be used for a Background Image.
Tip: Not all themes display the background image well, even if they support the setting. So, use the Twenty Fifteen theme, as it does display the use of a background image. You may not see the header image that you previously set after changing themes, but WordPress typically saves theme settings, so that you may change back to a previously used theme without losing prior settings.
In the WordPress Customizer, click the Change button for the Active Theme
Select the Twenty Fifteen theme or another theme you want to use that supports and displays a background image.
Click the Save & Activate button.
Click the Background Image section of the Customizer panel.
Click Select Image, and upload and Choose your image, similar to the Header Image setting.
Now that you have a Background Image, you will see the available options.
You can Save & Publish the default tiled background or make changes to the options.
There are three basic options for the background image:
Background Repeat: No Repeat, Tile, Tile Horizontally, or Tile Vertically
Background Position: Allow image to be positioned Left, Center, or Right
Background Attachment: Scroll background or display as Fixed
Try changing all of these options to the various settings to preview how the affect the display of the background image, including different combinations of the three options. When setting the Background Attachment option, you will need to test the preview by scrolling the page in the preview panel. With some options, the image may seem to disappear entirely, but that is due to a limited use of the image that is hidden behind another element in the foreground.
When you are satisfied with your background image, be sure to Save & Publish your work.
Now that you are able to use both header and background images, you can try using various images with various themes to preview the results. You don’t need to Save & Publish your work, as the Customizer allows you to preview the display before you commit to the results. This is a easy way to explore and practice layout techniques.
Twenty Fifteen theme
Add a header image to the Twenty Fifteen theme.
Note that this theme requires a vertical ratio for cropping.
Twenty Sixteen theme
Add a background image to the Twenty Sixteen theme.
Note that this theme only displays a minimal frame around the content area.
Test how header and background images in your themes appear in a mobile view: