Site Background

You can set a color or image for the entirety of your site. ProPhoto > Customizer > toggle 'Template' tab > Background 

When making customizations to your site's background, make sure to be on the base template. This is so that all child templates will inherit properly. We will be dedicating a post specifically to explaining inheritance in its entirety. 

Background Color

Select the color picker in the site background appearance area. Simply place the hex code of the color of your choosing and save background customizations. 

Background Image

You can drag and drop an image into the site background appearance area. You can select the image starting position, image size, tiling, and element scrolling settings. We have provided an example using our Excalibur design since there is a background image on the site. Here, we have a 200px x 200px image that have set to tile throughout the site. 

Background Image Size 

There are three options when it comes to background image size settings.

  1. ACTUAL SIZE places the image in the background without scaling. If the image is not large enough, it will not fill the entire background. However, if the image is too large, the image will be cropped off where it is larger than the background. 
  2. COVER ENTIRE ELEMENT WITH IMAGE will scale but not crop. The image will be scaled to fit the background area. If the ratio of the image is different than that of the background area, it will not fill the entire background area. 
  3. CONTAINING IMAGE WITHIN THE ELEMENT will both scale and crop the image. The image will be scaled in order to fill the entire background element, but the image will get cropped off wherever it is larger than the background element. 

Image Tiling

The tiling element allows you to decide how the image is repeated in the background area. This can be particularly useful if you have a pattern you'd like to be displayed as the background of your site. There are four options for tiling the background image on your site.

  1. TILE is when the image will be repeated horizontally and vertically as needed to fill the entire background area. This is a good way to have a seamless pattern appear as your background. You can see this applied on our Excalibur design.
  2. TILE ONLY VERTICALLY is when an image is repeated vertically only to fill the background area.
  3. TILE ONLY HORIZONTALLY makes an image repeat horizontally only in order to fill the background area.
  4. DO NOT TILE is used if you have an image that is large enough to fill the entirety of the pretty self-explanatory. If you choose to not tile the image, make sure to choose cover and contain options.

Image Scrolling Behaviors

Typically, background images are set to scroll with the page, but there is also an option to have the image stay fixed in place. When an image is set to stay fixed in place, the image will stay in the same position, even while scrolling. This applies a parallax effect that is a unique way to display images.

View ProPhoto's tutorial on site background settings here.