Hintergrund-Bild (backstretch)

Hintergrund-Bilder liegen, wie der Name sagt, im Hintergrund, d.h. andere Elemente können diese Bilder überlagern. Eine besondere Form davon sind „Backstretch“-Bilder. Diese passen sich der Form Ihres übergeordneten Elements an und füllen dieses auf jeden Fall, egal, wie sich die Form verändert. Da das Bild dabei nicht verzerrt wird, sondern nur skaliert, wird ggfs. rechts und links oder oben und unten etwas vom Bild abgeschnitten, damit die Fläche im vorgegebenen Seitenverhältnis gefüllt werden kann.

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 Brwoser-Fensters ändert, ändert sich ggfs. der Zuschnitt des Bildes.

Optionen & Einstellungen

Bild | picture

the picture file to be shown

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.

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