WordPress Appearance Options: How to change theme background color or add a background image
Changing the background color that surrounds your content is an easy way to freshen up your site. Be even more creative by adding a background image. Just make sure that your color and image choices do not over power your art work.
Read through the page on Prepare for your website for links to some tools that will help you with color.
To change theme background in WordPress, navigate to the Appearance>Background
Background Image – the live preview pane will generate a preview of any image you upload, as well as your color selection.
Upload Image – browse your computer or media library to find the image you want and click the “upload” button.
Display Options:
Position – select where on the screen you want the top left corner of your image. This is the starting position.
Repeat – large single images probably won’t repeat but for smaller tiling images you can choose tile (will repeat both vertical and horizontal) or just a vertical or horizontal only.
Attachment – means whether the image with scroll with the content or remain fixed behind the content.
The following are good settings for background image display options:
If you uploaded a small image that will tile or repeat (that is, displayed multiple times in the background), use these settings:
Position: select Left
Repeat: select Tile option along with direction. You can select both vertical and horizontal to fill the entire screen.
Attachment: select Scroll or Fixed
If you uploaded one larger single image, select these settings:
Position: select Center
Repeat: select No Repeat
Attachment: select Fixed or Scroll
Remove: will remove the image from the live site and will restore any default image your theme has.
To change the background color use the back button to go back to the customize main menu and selector Colors (the options here depend on the theme). Look for Background and select a color using the color wheel or type in the color hexadecimal code if you know what you want. This option will allow you to set the color which fills the space around the background image. See also this tutorial.
How the Color Wheel Works
All colors have a “Hexadecimal” color code. If you know the color code you want, you may enter it manually. See Prepare for your website for links to play with color.
To remove the color and set it back to the theme’s default, simply delete it from the box and save. Tip: if you are unsure whether or not you’re going to use a specific color, but want to try others before committing, make sure you copy down the hexadecimal code that appears in the color task pane before deleting it.
The color wheel is explained on the image above and can be accessed by clicking on the “Select a Color” link. You will see the color choice in the preview task pane at the top of the page.
It is advisable to ensure that your new image is optimized for the web for fast loading. See “Resize Images for the Web”.
Quick Study: the first video shows how to change the background image and color
On to Changing the Header Image. Are you having fun yet?
