Backgrounds

Background Color or Image

• Open the PAGE SETTINGS (via the purple bar at the top or the purple button next to the page in the overview) and scroll to the Background
• Background color; Click in the field with the color code (e.g., #fff333), and the color picker will open. You can then select a new color, and the new color code will be placed in the field. If you have the correct hexadecimal color codes, you can also paste the code directly into the field. If you leave the field blank, the background will be white.
• Background image insert, change, or remove;
  Click the purple "Add Media" button, or click "Remove" first if you want to replace an existing image.
  The media manager will open. Choose an existing photo or upload your own image via "Choose File" at the top.
  For more information about the media manager and uploading photos, click here.
• Backgroundvideo: Upload an MP4 file (maximum 64MB) as a background video. Background videos are for ambiance; no sound will be played.
  If you want an informative video with sound, it’s better to add a content block "Video" to the page. You can use either an MP4 file or a YouTube link for this. Learn more about the video content block on this page.
  See an example of a page with a background video from the standard templates
  You don’t always have to show the background video in the header. You can show it elsewhere on the page, such as in a strip with a streamer, as shown in this example.

Settings

The settings below only apply to the background image.If you have added the background image you can see if you need to change anything in the settings, sometimes the default settings are already good, but another setting is better for the subject of the photo.

• Background image behavior:
  Scroll: the image scrolls along with the content, after scrolling the image is out of view. View an example
  Fixed: The image remains, the content scrolls over the photo. The photo always remains in view unless content scrolls over it with a background color, this then hides the background photo. View an example
  The default setting is fixed.The options local, initial and inherit show the same as scroll.
• Background repeat:
  Repeat:  You use this when you want to repeat your background image in a pattern. Enter a value for the width of the image in the Background size, e.g.: 20% auto. View an example
  Repeat-x / Repeat-y: repetition of the image only horizontally (x) or only vertically (y)
  No-repeat: no repetition, the image is only shown once. This is the setting if you want a full-screen background photo.

Size and Position

• Background size: Enter two values in this field—width and height—separated by a space. To maintain the aspect ratio, use "auto" for one of the values (in most cases, "auto" is used because you don’t want to distort the image).
  Example 100% auto - the image will be 100% wide, and the height will automatically adjust to the correct ratio.
• Background position: This controls the alignment of the image on the page. The default settings are horizontal alignment (x) as Center and vertical alignment (y) as Top, which are often suitable.
  • Background position-x: Horizontal alignment; Left, Center, or Right.
    If the background size is set to 100% auto (100% width), you won’t see a difference between these options. However, you will notice a difference if the width is set to less than 100%.
    If you leave this field blank, a horizontal parallax effect will occur; the image will move horizontally as you scroll down. Set the background-repeat to repeat-x. See an example of horizontal parallax.
  • Background position-y: Vertical alignment; Top, Center, Bottom.
    If the subject of the photo is positioned low, you might set the y-position to Center. This will move the image slightly upward.
    Be careful when using Bottom for the y-position, as this can leave an empty edge at the top of the screen if the image is too short.

Below are two examples of different background position settings. The background size for both is 100% auto. The image on the left has the default setting: Center (x), Top (y). The image on the right is set to Center (x), Center (y).

See the pages of the examples above

• Background position Center(x)/Top(y)
• background postition Center(x)/Center(y)

Responsive background

On the desktop, a screen has a landscape format. When you view the page on a mobile phone, you see the same page in portrait format. On both screen formats, the background image is displayed full screen. The default settings that ensure this are exactly the opposite for desktop and mobile, on desktop the width is 100%, on mobile the height is 100%:

When you use a horizontal photo format, you will see that a large part of the photo is lost on the side on mobile. If the subject of the photo is in the middle, this will not be a problem. If the subject of the photo is on the left or right side, you can display the subject on the mobile screen by setting the size and position for the responsive settings: Set Mobile background position-x left or right instead of centered. So it depends on the subject of the image which setting is most suitable.

In the example below you can see the different settings for a different subject in the photo; the Mobile background position-x set Right/ Center/ Left

Background of a section

In addition to the page, you can also give the sections a background image (both are possible). You can also give a color to the entire section or to the individual columns.

• Open the section by clicking on the name on the left, or add a new section.
• Background color: click on the color tab and click in the upper field Background color to give the entire section a color, choose a color or paste the hexadecimal color number into the field.The fields below are for the individual columns, you only have to fill these in if you want to give them different colors.
• Background image: Click on the background tab
  Click on the button Add media. The Media manager will open: choose an existing image or upload a new image
  Settings for the background image
  The settings are similar to the settings described above: Background repeat, Background image behavior, Background position and Background size. There are no separate settings for the background of the section for mobile display.

Examples in the default templates

• This page has 5 sections with a fixed background image, the content in each section scrolls over the background photo.
• This page has a section with a streamer, the section has a fixed background image, the streamer scrolls over it.