Background color/image

Learn about setting featured images for your blog posts, web pages, and ProPhoto galleries in our Set a featured image guide.

When setting a background image at the layout, block, row or column level, you can set it to show a featured image by using the option available.

When this featured image option is chosen, the background of the layout, block, row or column will display the featured image set in the post/page/gallery applied to that particular layout. If no featured image is set in the post/page/gallery, the uploaded background image from this area will be used instead (if supplied).

Using a featured image as a background makes it possible to create a dynamic area of your layout which updates with the page being viewed. This eliminates the need to create multiple layouts for multiple pages just to change a background image with each page.

As an example, the Agency design uses the settings seen in the example above so that posts/pages display featured images in the header row above the post/page content.

When using a background image, you may control its position. Several options are available for position, each placed in the respective spot in this table:

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:

Use the size control to affect how the image is applied to the element. A few options are available for size, each defined below:

• auto 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.

Use the View Mode panel at the top of the Visual Builder to check how each background size setting affects your image on different devices. And if images look too grainy or pixelated when they are scaled, try uploading a larger resolution of the image for your background.

Use the Repeat 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:

no-repeat: if the image is too small for the element background area, it will not be repeated. (see section above for cover and contain options)

repeat: if the image is too small, it will be repeated horizontally and vertically as needed to fill the element background area.

repeat-y: if the image is too small, it will be repeated vertically only as needed to fill the element background area.

repeat-x: if the image is too small, it will be repeated horizontally only as needed to fill the element background area.

Repeating 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 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. (This can be used to achieve the web design effect often referred to as parallax scrolling, discussed below.)

Just be aware that 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:

NOTE: fixed background images will not work on iOS or Android - mobile browsers disable fixed scrolling behavior for performance and battery saving reasons, so images will scroll with your page normally in mobile browsers

The ability to add a background for every block, row and column on your site presents a world of design possibilities. Below are some some examples of common methods used to produce some fun modern background effects.

Backgrounds that fully cover automatically

Any block, row or column can have a background image set to a background size of cover. This handy tool causes the image to always cover the full size of the layout item as it shrinks and expands in a responsive environment. For example, the included design Capri uses this feature for the image at the top of the home page.

As the browser changes size, more or less of the background image is revealed. This image is set to an alignment of center center. As you can see, more/less of the image is revealed based on the screen size.

Aspect ratio

As shown in the example, there is cropping involved when a background covers an area. So carefully consider the aspect ratio you use and the composition of your image.

Full window backgrounds

A popular site design technique is to feature a background image that completely covers the initial browser window. The home page of the Atlas design in our store is a good example.

In this case, the top block in the layout is set to display a background image. Besides setting the background size to cover, the key to making this work is setting the block to occupy the full window height like so.

Any widgets you add to the block will appear on top of this background image. Use top padding on the row or column, as well as the vertical module alignment options for columns to dial in the position of the modules on top of the background.

Parallax background images

Selectively applying fixed background images to some blocks and a solid color to others achieves a parallax effect as you scroll down a page with multiple blocks. Check out the Wander design to see an example. If you are interested in applying this look to a page on your site try these steps.

1. Create or copy a layout and assign it to the page where you want the parallax effect.
2. Make sure you have multiple blocks within the layout and use modules to add content to them. This is going to create the horizontal 'stripe' areas where you see either a solid color or a static background photo. The height of the modules and the top/bottom padding will set the height of each block.
3. Edit the blocks for which you want to show a parallax background image scrolling by underneath. Set the background color to be none or transparent.
4. Upload a large photo (2-3k pixels wide but still compressed) to act as the background image and set up these options for the background image:
   starting position - top center or center center recommended
   image size - cover entire element with image
   tiling - do not tile
   scrolling behavior - fixed
5. For other blocks, set a solid color as the background. You'll want to alternate between blocks with color and blocks with the fixed image background.

Repeat steps 3, 4 and 5 for various blocks, and you'll notice that as you scroll down your site the background image can be seen through the blocks that have the fixed background image, and that it changes as the new block background image scrolls by.

If you don't see the image, but a solid color instead, double-check that the row and column items in the blocks aren't adding their own background colors to overlay the block's background. You might want to experiment with the top or bottom padding (or both) for blocks which act as parallax background 'see through' stripes, so you can impact how tall each stripe of background area appears to be.

Notice how the fixed background images show underneath and the blocks with solid color backgrounds seem to slide over top of them.