Print

How to change Fullwidth Background Image

Table of Contents

Fullwidth background image is done either as Section Background or Row setting, depending on your lay out. This may varies from one page to another.

In Divi Builder, three basic elements make up most pages. They are: Sections, Rows and Modules. Sections contain Rows, and Rows contain Modules. Sections are blue (sometimes purple or red), Rows are green and Modules are Grey.

Change Fullwidth Background on Section

To check if your background image is set up on the Section level, click the cog icon on the top left of the (purple) section you want to replace.

You will be presented with the Section Setting, click on Background and you will be presented with a few options.

Section Content Options

Within the content tab, you will find all of the section’s content elements. For sections, these content elements are limited to background elements such as background images and videos.

Background Image If defined, this image will be used as the background for this module. To remove a background image, simply delete the URL from the settings field. To change click on the image and you will be given option to choose the existing images or upload. anew one.

Background Color If defined, this image will be used as the background for this module. To remove a background image, simply delete the URL from the settings field.

Change fullwidth Background on Row

If your background is not located on Section, check your row setting by clicking the cog icon on the top left of the (green)

Row Content Options

Within the content tab you will find all of the row’s content elements. Click on the Background setting and you will be able to make changes on the following:

The Content Settings

Background Color Background images can be applied to an entire row. By default, rows have a transparent background color.

Background Image Background images can be applied to the an entire row.

Background Video MP4 Background videos can be applied to rows. If you would like to apply a background video, you must upload both an MP4 and WEBM video and input the videos here.

Background Video Webm Background videos can be applied to rows. If you would like to apply a background video, you must upload both an MP4 and WEBM video and input the videos here. ** Background Video Width** After your videos have been uploaded, you must input the width of your video here. It must be equal to the actual width of the video, otherwise the background position will be incorrect.

Background Video Height After your videos have been uploaded, you must input the height of your video here. It must be equal to the actual height of the video, otherwise the background position will be incorrect.

Pause Video If you would like videos to be paused when clicked, enable this option.

Column Background Color For each column in a row, you can assign a unique background color.

Column Background Image For each column in a row, you can assign a unique background image.

Change fullwidth Background on Full-Width Slides

If you have slides on fullwidth on the top of your website, please follow this instruction.

Click the grey cog icon on the module.

You will be presented with these options, and click on the slide option that you would like to change the background of.

Within the content tab you will find all of the module’s content elements. Click on the Background setting and you will be able to make changes on the following:

The Content Settings

Background Image Position By default, background images are displayed in the center of the slide. You can use this setting to change the positioning to top, bottom, left, right, or any of the four corners of the slide.

Background Image Size By default, background images will be scaled up proportionally to ensure that they fill the entire slide. However, you can use this option to change the default behavior. “Cover” is the default behavior, which will scale the image to cover the entire slide area. “Fit” will also force the image to cover the entire area, however, it will force the image’s height and width to match the height and width of the slider. This may result in a skewed image, but it will prevent image cropping. “Actual Size” will not scale the image at all and will display it at its native size.

Background Color If you would simply like to use a solid color background for your slide, use the color picker to define a background color.

Background Video MP4 All videos should be uploaded in both .MP4 .WEBM formats to ensure maximum compatibility in all browsers. Upload the .MP4 version here. Important Note: Video backgrounds are disabled from mobile devices. Instead, your bkacground image will be used. For this reason, you should define both a background image and a background video to ensure best results.

Background Video WEBM All videos should be uploaded in both .MP4 .WEBM formats to ensure maximum compatibility in all browsers. Upload the .WEBM versions here. Important Note: Video backgrounds are disabled from mobile devices. Instead, your bkacground image will be used. For this reason, you should define both a background image and a background video to ensure best results.

Background Video Width In order for videos to be sized correctly, you must input the exact width (in pixels) of your video here.

Background Video Height In order for videos to be sized correctly, you must input the exact height (in pixels) of your video here.

Pin It on Pinterest