Setting a Site Background

Utility Pro uses a “backstretch” script to stretch the background image to fill the screen. A couple of important things to know:

  1. Your background image will only show on the Front page of your site or any page using the Landing Page template
  2. Since the image stretches to fill the screen, it will look different on different screen sizes. For this reason, it’s recommended that you NOT use extreme closeups of faces or images that include text.
  3. A great size for your background image is approximately 1200px wide by 800px high. This isn’t a rule, just a suggestion.
  4. The area where the backstretch image displays includes a dark, opaque overlay to help text stand out. This can be changed – check the final step in this tutorial.

Navigate to the Background Settings

From your WordPress admin, go to the Appearance menu and click on Background. This will open up the Theme Customizer window.

Set the Background Image from the Theme Customizer

Once you’re on the Theme Customizer window, look for the Background Image section.

If no background is selected, then you’ll want to click the Select Image button (not shown because I already have a background image selected) and upload your file.

You can Change Image or Remove at any time, using those buttons, respectively.

A couple of extra bonus items…. Because this theme uses the Backstretch script, the following settings do not matter:

  1. Background Repeat
  2. Background Position
  3. Background Attachment

Once your photo is set, don’t forget to click the Save & Publish button!

Change the Color Overlay over the Backstretch Image

The backstretch image includes a cover overlay that helps the text stand out more. You can remove this completely, or modify it by locating the modifying the following code in the theme’s style.css file:

.home-welcome {
background-color: rgba(51, 51, 51, 0.8);
padding: 40px 0;
text-align: center;

Change that last number of .8 in background: rgba to another value to experiment on the background image shading (0 is complete transparency and 1 is full). The three numbers before it represent the RGB value.

Author: Carrie Dils

I make the stuff you see on this site. When I'm not working with WordPress, I'm likely reading, eating, or sleeping.