Introduction
The Theme General Options and Backgrounds options panel is where you can alter a number of settings that affect aspects of your theme that are not specifically isolated to individual blocks:
This tutorial looks specifically at the options available when you click the Theme General Options and Backgrounds > Background bar. These options apply to three specific areas of your theme:
- Full Screen Background. The primary background of your theme that is displayed across the full screen but that sits behind everything else. An easy way to think of the full screen background is to think of it’s primary visible area as being the full area outside of the 8 blocks or outside the main content area of your site.
- Overlay Background. A second background image that sits over the top of your full screen background.
- Background Linking. Option to link your background image to any URL of your choosing. Background image linking is a powerful marketing tool as you can upload full screen “branding” images as your site background that act as powerful banners.
The most common use of these two background images (full screen and overlay) is for the Full Screen Background image to fill the browser window or tile from left to right, while the Overlay Background image tiles from top to bottom to create an effect such as shadows either side of the main content area of your site. You can also use the Full Screen Background to show an image, while using your Overlay Background image as a transparent gradient to add extra effect.
Note: Any full width block background images & colors will obscure the full screen & overlay backgrounds. However, you can clear background images and colors of any block from within the Background options panel of the block, thereby allowing the full screen & overlay backgrounds to show through.
Full Screen Background
To set a full screen background:
1. Select a Full Screen Background Color using the Color Picker Tool. If you don’t want a full screen background color, click the 
button (the default background color will change to “none”).
2. If you want to use a background image, upload your image using the Image Upload tool.
The default entry for this field is “noimage”. If you don’t want a background image, click
to restore this field to its default value.
Note: The maximum size of any background image upload is 500kb which is quite a large file size. You should aim to make the file size of any image you use in your theme as small as possible otherwise your overall site load speed will suffer.
3. If you are using a background image, click the appropriate Full Screen Background Image Tiling radio-button to select your preferred image tiling method. If you are not using an image leave this selection at its default value of “No Tiling”. Tiling (or “repeating”) gives you additional control over how your background image is displayed:
- No Tiling: The image will appear once only, centered at the top of the background area.
- Left to right: The image will repeat horizontally, aligned to the top of the background area.
- Top to bottom: The image will repeat vertically, centered in the background area.
- Both directions: The image will repeat horizontally and vertically, filling the entire background area
.
4. Click the appropriate Fixed Full Screen Background Image radio-button to select whether or not you want your background image to remain static when a user scrolls through your site or whether you want the image to scroll as well. Enabling a fixed background image will not override your image tiling settings. Image tiling will still apply to fill the browser window with your image, but the image that fills the browser window will remain static during scrolling.
5. Click the appropriate Stretch Full Screen Background Image radio-button to select whether or not you want your background image to be stretched to fill the entire browser window. If you enable this setting it will override the tiling settings selected at step 2. If you are tiling your image you do not need to enable this setting.
6. Click 
to apply the change in the ThemeStarta preview.
7. Click 
to apply your changes to your live WordPress theme.
Overlay Background
To overlay a second background image on top of your full screen background:
1. Upload your image using the Image Upload tool.
The default entry for this field is “noimage”. If you don’t want a background image or wish to remove a previously uploaded image, click to restore this field to its default value.
Note: The maximum size of any background image upload is 500kb which is quite a large file size. You should aim to make the file size of any image you use in your theme as small as possible otherwise your overall site load speed will suffer.
2. Click the appropriate Overlay Background Image Tiling radio-button to select your preferred image tiling method. Tiling (or “repeating”) gives you additional control over how your background image is displayed:
- No Tiling: The image will appear once only, centered at the top of the background area.
- Left to right: The image will repeat horizontally, aligned to the top of the background area.
- Top to bottom: The image will repeat vertically, centered in the background area.
- Both directions: The image will repeat horizontally and vertically, filling the entire background area
3. Click the appropriate Fixed Overlay Background Image radio-button to select whether or not you want your overlay background image to remain static when a user scrolls through your site or whether you want the image to scroll as well. Enabling a fixed overlay background image will not override your image tiling settings. Image tiling will still apply to fill the site background area to the extent that it fills the browser window, but the tiled image that fills the site background area of the browser window will remain static during scrolling.
4. Click to apply the change in the ThemeStarta preview.
5. Click to apply your changes to your live WordPress theme.
Background Link
If you want your background area to link to a specific URL, type or paste that URL link into the Background Link field.
Note: Any link you enter in this field will be applied to the entire full screen background of your theme (full screen and site background inclusive). However, your linked background will not be clickable in any area where your primary background is covered by one or more individual block backgrounds.
Refer to the Site Width and Wrapper tutorial to learn more about setting full screen and site wide backgrounds.
Related Tutorials:
