Adding and Customizing the Background with Phlox Background Settings

To customize the background settings of your website first you need to set the website layout to boxed:

Then you can find the related options in the customizer by below steps:

By switching on this option, all the options will appear, and you can customize the background of the website.

Specifies the background color of the website's body.

Add an image you want to appear as a background. If you do not add an image, just the color you have chosen will display as your website background.

Your image can be shown three sizes: Auto, Contain, and Cover

On auto mode, the image will appear at the top of the website and on its actual size.
On contain mode, the image will be scaled to the largest size. It means that the image's width and height can fit in the content area.
On cover mode, the background image appears as large as possible and the background area is fully covered by the image.

Your background, with or without image, can have various patterns. Select any pattern you want to apply on your background.

You are able to specify the background image repetition:

There are different alignments for background image:

The background image can be scrollable or fixed.