In this tutorial I will show you how to change the main background color of Foodie Pro.
I’ll also show you how to add a large background image to Foodie Pro. In the video I use an image of 1920×1080 pixels. This will fill the screen of most computers so I don’t need to tile or repeat the image.
First remember, people using small devices such as iPads may never see your background color or background image.
Don’t choose bright backgrounds
Whenever I change a background I ask myself, will this distract the visitor from the content I want them to focus on? The answer should be no!
To change the main background color go to…
- Appearance > Customize > Colors
- Choose: Main Background Color
This is the first option in the list. Click the Select Color button or type in a hexadecimal color code in the box.
I wanted to use a shade of Orange so I pasted my code in the box then I dragged the slider down slightly. This gave me a lighter shade of the Orange color I’m using in other parts of my Foodie Pro site.
When I was happy with the shade, I clicked the big blue Save and Publish button.
Adding a background image instead of a background color to Foodie Pro
First you’ll need an image to use. You have two main choices. You could have…
- A small image that will tile. (Or)
- A large image that will cover the whole area.
If you use a small image that repeats or tiles many times, test the image to see what it looks like. Some images tile seamlessly but some look very boxy. Finding an image that looks good as a tiled background image is not easy.
Background image sizes
Modern internet connections are fast. So you might decide that it’s worth using one very big background image for your Foodie Pro site. If you use an image of 1920×1080 pixels it will fill the screen of most computers.
The best way to find out what looks best is to experiment. Just upload an image and see how it looks.
The Background Image Settings
You have three main options for your background image…
Background Repeat
- No Repeat
- Tile
- Tile Horizontally
- Tile Vertically
Background Position
- Left
- Center
- Right
Background Attachment
- Scroll
- Fixed
I chose Tile, Center, Fixed. But if I was you, I’d experiment with the different options and see which suits your site the best.
Don’t forget, people using small screen devices such as phones and tablets won’t see your background image. So think twice before using a large image that takes time to download. Foodie Pro gives you a lot of power. But some times it’s best to have some restraint.