Go to the Customizer -> General Settings -> Background Image.
First, you need to upload an image that will be set as background for a page or a page section.
Afterwards, you can remove the image, if it no longer fits the overall design, or you can change the image.
Note! The background image will only be visible if a page section has the background set to transparent. If that page section background is already set to image or color, the image you apply to the background from General Settings won’t be displayed.
There are 5 arrangements of the image you can play with:
- Default – this is the default placement of the image as background in the webpage.
- Fill Screen – the image occupies the entire section space dedicated to the background displayed on the screen. Furthermore, you can adjust the image position using the graph in the Customizer.
- Fit to Screen – the image is perfectly arranged into the section background. You can also adjust the image position using the graph in the customizer. In addition, you can enable the option to Repeat Background Image.
- Repeat – the image is repeated onto the background of the webpage section. The image position can be set by using the corresponding graph in the Customizer. An additional option is to enable scrolling image background with page (when a user scrolls down the page, the content moves, along with that section background image).
- Custom – from here, you have the possibility to customize the arrangement of the image according to your preferences. First, you’ll define the image position, by using the corresponding graph in the customizer. Second, you’ll use a certain image size (original image size, fit to screen or fill screen). Third, you might enable the option to repeat background image into the section. Last, you can enable scrolling with page, so that the image moves as the content moves itself when scrolling down the page.