Hintergrund-Bild

Hintergrund-Bilder liegen, wie der Name sagt, im Hintergrund, d.h. andere Elemente können diese Bilder überlagern. Um auf dem Bild platzierten Text besser lesbar zu machen, können Sie im surfboard CMS direkt auch eine „Overlay“-Ebene aktivieren, die das Bild etwas abdunkelt oder aufhellt, um den Kontrast zur Textfarbe zu verbessern.

Beispiele

Dieses Bild liegt im Hintergrund. Es füllt immer die vorgegebene Fläche aus. Wenn sich die Größe bzw. das Seitenverhältnis des Browser-Fensters ändert, ändert sich ggfs. der Zuschnitt des Bildes.

Optionen & Einstellungen

Bild | picture

the picture file to be shown

Vorab laden? | preload

Ausrichtung (X) | alignx

controls the horizontal alignment of the picture when it comes to cutting
the value is given as number from 0 (left) to 1 (right). if set to 0 (left), only the right edge will be cut, and vice versa.

Ausrichtung (Y) | aligny

controls the vertical alignment of the picture when it comes to cutting

Skalierungs-Modus | scale

select the scale mode of the picture
cover: the whole container will be filled completely, the picture may get cropped
contain: the whole picture will be shown, there may be visible space around the picture.

Alt-Attribut | alt

Text | caption

the visible caption of the picture
the caption is the text to be shown with the picture (unline the invisible 'title' or 'alt' attribute).

Text (CSS-Klassen) | captionclass

the CSS textblock style to be used for the caption

Text (Position) | captionposition

select the position of the caption