Background

Purpose

The Background component allows the author to place various component on a colored background. By using the Background component a colored background can be defined for the whole width or the limited width of the page. Either a color theme as defined in the Country page can be used for this, or a blue or grey color gradient can be selected. Furthermore, it is also possible to define an image as background.

Go directly to

Examples

The following examples show what the component can look like. Depending on the configuration, a component can be displayed in different ways.

store

Background Example 1

Background configuration: Full width, color gradient, grey

Integrated components on Background: Text & Media component with headline and link

Background Example 2: Background configuration: limited width, color theme;

Component on Background component: Quote

Background Example 3

Background configuration: limited width, image background, Components on background component: Column component in combination with Text Icon Component (right) and Text & Media Component (left).

Example 4

Background configuration: limited width, image background,


Components on background component: Column component in combination with Text Icon Component (right) and Text & Media Component (left).

 

List of Components which can be used on the Background Component

Configuration

To create the component, follow the steps below. 

Setting on Background component
  • Step 1
    Select whether a color theme or a color gradient should be used to display the background
  • Step 2
    Choose from the dropdown menu either the color theme or the color gradient
  • Step 3
    Select whether the width of the background component depends on the surrounding container or whether it is the entire width.
  • Step 4
    If neither color theme nor gradient is applicable, an image can be inserted here
  • Step 5
    Choose Repetition rate of the image (horizontal and vertical, horizontal, vertical)
  • Step 6
    Choose Horizontal alignment (left, center, right)
  • Step 7
    Choose vertical alignment (top, center, bottom)
Erinnerung für
Fehler Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.

Sollen wir Sie benachrichtigen wenn der Artikel verfügbar ist?

hh

Tag der Erinnerung
Zwei Tage vorher
Einen Tag vorher
Am Angebotstag
Uhrzeit
00:00
01:00
02:00
03:00
04:00
05:00
06:00
07:00
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00
Hinweise
  • line 1
  • line 2
  • ...

Eine Erinnerung ist nicht mehr möglich

Die Erinnerungszeiten für diesem Artikel sind bereits abgelaufen.

Erinnerung aktiv!

hh

Sie erhalten Ihre Erinnerung am ${date} um ${time} Uhr.

hh

Wir senden Ihnen noch eine Nachricht per E-Mail, um ihre E-Mail Adresse zu bestätigen. Bitte klicken Sie auf den Link in der Nachricht.

regions.regionSwitchHeadline

regions.regionSwitchText
regions.regionSwitchTextExplicitSwitch