Section Layout with Background Image

Content

Section Layouts with Background Image have one mandatory content parameter:

• Responsive Picture - a picture or an image.

Responsive Picture

Responsive Picture element that has three mandatory content parameters:

• Mobile Image - a single image which supports a variety of media formats and image transparency.
• Desktop Image (optional) - a single optional image that overwrites Mobile Image on bigger screens (device width more or equal to 992px). It supports a variety of media formats and image transparency.
• Content Description - a description of the uploaded image. It is very important to add a detailed image description for the website to be accessible for people who use screen readers.

Settings

Section Layouts with Background Image have the following settings:

• Hide - hides the whole page layout together with the page components inside.
• Text Contrast - changes text contrast from white text to dark text.
• Content Vertical Position - sets the vertical position of the content inside the Section Layouts with Background Image.
• Desktop Content Vertical Position- does the same as Content Vertical Position but active only on desktop devices (device width more or equal to 992px).
• Section Layout Height - sets Section Layout with Background Image height.
• Desktop Section Layout Height- does the same as Section Layout Height but active only on desktop devices (device width more or equal to 992px).
• Section Layout Width - sets the Section Layout with Background Image width to build page components in.
• Background Image Vertical Focus Point - sets the background image vertical focus point.
• Desktop Background Image Vertical Focus Point - does the same as Background Image Vertical Focus Point but active only on desktop devices (device width more or equal to 992px).
• Background Image Horizontal Focus Point - sets the background image horizontal focus point.
• Desktop Background Image Horizontal Focus Point - does the same as Background Image Horizontal Focus Point but active only on desktop devices (device width more or equal to 992px).
• Image Brightness - sets the background image brightness.

Text Contrast

Toggling this setting will change text contrast from white text to dark text.

Content Vertical Position

Sets the vertical position of the content inside the Section Layouts with Background Image.

Desktop Content Vertical Position

Does the same as Content Vertical Position but active only on desktop devices (device width more or equal to 992px).

Section Layout Height

Sets Section Layout with Background Image height, however, the section will never be smaller than the size of the content inside of it. By default, the section height is defined by the content inside of it.

There are 4 sizes to choose from:

• Small - sets the section to be a quarter (1/4) of the total device screen height. Image aspect ratio should be:
  
  • 64:9 for desktop devices (dimensions: 2560x360 or 1920x270 pixels).
  • 9:4 or 2:1 for mobile devices.
• Medium - sets the section to be half (1/2) of the total device screen height. Image aspect ratio should be:
  • 32:9 for desktop devices (dimensions: 2560x720 or 1920x540 pixels).
  • 9:8 or 1:1 for mobile devices.
• Large - sets the section to be three quarters (3/4) of the total device screen height. Image aspect ratio should be:
  • 64:27 for desktop devices (dimensions: 2560x1080 or 1920x810 pixels).
  • 3:4 or 2:3 for mobile devices.
• Full height - sets the section to be the full height of the total device screen height. Image aspect ratio should be:
  • 16:9 for desktop devices (dimensions: 2560x1440 or 1920x1080 pixels).
  • 9:16 or 9:18 for mobile devices.

Desktop Section Layout Height

Does the same as Section Layout Height but active only on desktop devices (device width more or equal to 992px).

Section Layout Width

Sets the Section Layout with Background Image width to build page components in.

Background Image Vertical Focus Point

Sets the background image vertical focus point. This can be combined with Background Image Horizontal Focus Point setting to select a specific place to focus on the background image. By default, it will focus to the center of the image.

Desktop Background Image Vertical Focus Point

Does the same as Background Image Vertical Focus Point but active only on desktop devices (device width more or equal to 992px).

Background Image Horizontal Focus Point

Sets the background image horizontal focus point. This can be combined with Background Image Vertical Focus Point setting to select a specific place to focus on the background image. By default, it will focus to the center of the image.

Desktop Background Image Horizontal Focus Point

Does the same as Background Image Horizontal Focus Point but active only on desktop devices (device width more or equal to 992px).

Image Brightness

Sets the background image brightness. The bigger the value the dimmer the background image will be.

Padding Settings

Padding settings are used to configure the empty space or in other way called padding around the Section Layout with Background Image. Padding settings are split into two categories - Mobile Padding and Desktop Padding. These groups have a number of settings to modify the Section Layout with Background Image padding.

Mobile Padding

Section Layouts have the following mobile padding settings:

• Mobile Custom Padding - activates custom Section Layout with Background Image padding on mobile devices (device width less than 992px). Without this toggle enabled, any changes done to Mobile Top Padding and/or Mobile Bottom Padding won't have any effect.
• Mobile Top Padding - changes the Section Layout with Background Image top padding.
• Mobile Bottom Padding - changes the Section Layout with Background Image bottom padding.

Examples below showcases the padding functionality on mobile devices (the padding on desktop devices is left unchanged as the Desktop Custom Padding setting is not enabled) - change the browser size to see the results:

Desktop Padding

Section Layouts have the following desktop padding settings:

• Desktop Custom Padding - activates custom Section Layout with Background Image padding on desktop devices (device width more or equal to 992px). Without this toggle enabled, any changes done to Desktop Top Padding and/or Desktop Bottom Padding won't have any effect.
• Desktop Top Padding - changes the Section Layout with Background Image top padding.
• Desktop Bottom Padding - changes the Section Layout with Background Image bottom padding.

Examples below showcases the functionality on desktop devices (the padding on mobile devices is left unchanged as the Mobile Custom Padding setting is not enabled):