To set a color or image for your entire site’s background, navigate to “ProPhoto > Customizer > Background” and locate the Site Background Appearance settings.
Site background color
Pretty straightforward, just click the color picker in the background color area.
Site background image
To set a site background image, just drop an image in the area denoted, or click to upload.
Once uploaded, you can then select:
Background image starting position
When using a background image, you may control it’s position. Several options are available for position, each placed in the respective spot in this table:
|top left||top center||top right|
|center left||center center||center right|
|bottom left||bottom center||bottom right|
The image will be placed, relative to the edges of the layout item, in the location you select. For example, bottom center will align the bottom edge of the image to the bottom edge of the item, and will align the horizontal center of the image with the horizontal center of the item, like this illustration:
Like other settings, this image position can be applied at a parent level and inherited.
Background image size
Background images have a width & height shown in the file details after upload, but you can use the size control to affect how the image is applied to the element. A few options are available for size, each defined below:
actual size: no scaling, with cropping.
This will fix the image at 100% size in the background area without scaling. Background area will remain uncovered if the image is not large enough, and the image will be cropped away where it is larger than the element.
contain image within element: with scaling, no cropping.
This will fit the image in the background area by scaling to the edge of the space. Background area will remain uncovered if the aspect ratio of the image is different from the aspect ratio element.
cover entire element with image: with scaling & cropping.
This will fill the image in the background area by scaling to the edge of the space. Background area is covered completely, but the image will be cropped away where it is larger than the element.
Below is a demonstration of each background size type. The green element has a background applied bottom center like our example above, and is resized to show how a background behaves with different element aspect ratios:
As you can see, the background image may flex to different width/height, so test your design to make sure images look and behave the way you want. Use different window or screen sizes to check. If images look too grainy or pixelated when they are scaled, try uploading a larger resolution of the image for your background.
Background image tiling
Background images have a width & height shown in the file details after upload, but you can use the tile control to affect how the image is repeated behind the element when the image is too small at actual size. The options are each defined below, followed by an example:
- do not tile: if the image is too small for the element background area, it will not be repeated. (see section above for cover and contain options)
- tile: if the image is too small, it will be repeated horizontally and vertically as needed to fill the element background area.
- tile only vertically: if the image is too small, it will be repeated vertically only as needed to fill the element background area.
- tile only horizontally: if the image is too small, it will be repeated horizontally only as needed to fill the element background area.
Tiling is typically not used in combination with the cover size option explained in the image size section above, but may be used when actual or contain sizing is selected.
Background image scrolling behavior
Background images are usually set to scroll with page, but you can also choose to have backgrounds stay fixed in place.
When a background is set to stay fixed in place, it appears stationary in the browser, even while scrolling. The image position (see the section above) will be relative to the browser window, and not the element. This means that bottom center is the bottom center of the browser window, regardless of where the item is on the page. For example:
Typically, stay fixed in place is applied to the site layout item background image, since it is the main background of the site. But this option may be applied to other layout item backgrounds for a cool layered effect.