1. Home
  2. /
  3. Blog
  4. /
  5. Foodie Pro
  6. /
  7. Foodie Pro background Color...

Foodie Pro background Color and Background Image

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.

Setting the main background color in Foodie Pro

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.

My background settings for a large image in Foodie Pro

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.