CSS border-image - Rahmen aus Bildern erstellen

In CSS können Rahmen für HTML-Elemente nicht nur über Farben zugewiesen werden. Es ist auch möglich, ein Bild als Vorlage zu verwenden und daraus einen Rahmen zu generieren. So kann man z.B. Rahmen mit bestimmten Bildmustern erstellen. Hierbei wird das Bild durch vier Schnitte in 9 Bereiche aufgeteilt. Die Ecken des Bildes werden für die Ecken des Rahmens verwendet. Die Zwischenräume im Bild werden für die Bereiche zwischen den Ecken des Rahmens benutzt. Nachfolgend ist eine Abbildung mit einem Bild und einem Rahmen, der mit dem Bild generiert wurde.

CSS border-image

CSS-Code für den Rahmen

Der CSS-Code für einen Rahmen, der aus einem Bild generiert wird, setzt sich aus verschiedenen Bestandteilen zusammen. Auf der folgenden Abbildung ist ein Beispiel zu sehen und die Eigenschaften haben folgende Bedeutung.

  • border-image-source: Pfad zum Bild.
  • border-image-slice: Maße für die 4 Schnitte, mit denen das Bild aufgeteilt wird.
  • border-image-width: Breite für den Rahmen.
  • border-image-outset: Der Rahmen kann mit einem Abstand zum Element versehen werden.
  • border-image-repeat: Angabe, wie die horizontalen und vertikalen Zwischenräume des Rahmens gefüllt werden sollen.
CSS-Code für border-image

Maße für die Schnitte

Über die Eigenschaft border-image-slice können 4 Maße mit einem Leerzeichen getrennt angegeben werden, mit denen das Bild in 9 Bereiche aufgeteilt wird. Dabei wird von der oberen Kante begonnen und im Uhrzeigersinn werden die Abstände von der jeweiligen Kante angegeben. Mit der 5. Angabe fill wird angegeben, dass der mittlere Zwischenraum des Rahmens mit dem Teil des Bildes gefüllt werden soll, der beim Aufteilen des Bildes in der Mitte entsteht.

border-image-slice

Es müssen nicht immer alle 4 Schnitte angegeben werden. Wenn nur drei Maße angegeben werden, so gelten sie wie folgt.

  • 1. Wert: Schnittmaß von der oberen Kante (Nr. 1 auf dem Bild)
  • 2. Wert: Schnittmaß von der linken und rechten Kante (Nr. 2 und 4 auf dem Bild)
  • 3. Wert: Schnittmaß von der unteren Kante (Nr. 3 auf dem Bild)

Es können auch nur 2 Schnitte angegeben werden. In dem Fall gelten die Werte wie folgt.

  • 1. Wert: Schnittmaß von der oberen und unteren Kante (Nr. 1 und 3 auf dem Bild)
  • 2. Wert: Schnittmaß von der linken und rechten Kante (Nr. 2 und 4 auf dem Bild)

Wenn ein Wert für alle vier Schnittmaße gelten soll, reicht die Angabe eines Werts. Die Werte in Pixel werden ohne die Einheit px angegeben. Sie können auch in % (Prozent) angegeben werden. Um ein Bild genau zu 1/3 aufzuteilen, kann man 33.333333% angeben. Die 5. Angabe fill kann entfallen. In dem Fall wird der mittlere Zwischenraum des Rahmens nicht gefüllt.

Breite des Rahmens

Mit der Eigenschaft border-image-width können bis zu vier Werte für die Breite des Rahmens angegeben werden. Bei vier Werten wird mit der oberen Rahmenlinie begonnen und mit einem Leerzeichen getrennt die Werte für die übrigen Rahmenlinien im Uhrzeigersinn eingegeben. Bei nur drei Werten gelten diese wie folgt.

  • 1. Wert: Breite der Rahmenlinie oben
  • 2. Wert: Breite der Rahmenlinie links und rechts
  • 3. Wert: Breite der Rahmenlinie unten

Bei nur zwei Werten gelten diese wie folgt.

  • 1. Wert: Breite der Rahmenlinie oben und unten
  • 2. Wert: Breite der Rahmenlinie links und rechts

Bei nur einem Wert gilt dieser für alle 4 Rahmenlinien.

Abstand des Rahmens

Mit der Eigenschaft border-image-outset kann ein Abstand zwischen der äußeren Kante des Elements und dem Rahmen angegeben werden. Wenn vier Werte mit einem Leerzeichen getrennt angegeben werden, wird mit dem oberen Abstand begonnen und im Uhrzeigersinn die übrigen Abstände angegeben. Bei drei Werten gelten diese wie folgt.

  • 1. Wert: Abstand oben
  • 2. Wert: Abstand links und rechts
  • 3. Wert: Abstand unten

Bei zwei Werten gelten diese wie folgt.

  • 1. Wert: Abstand oben und unten
  • 2. Wert: Abstand links und rechts

Bei einem Wert gilt für alle Seiten derselbe Abstand. Als Maßeinheit kann man nicht nur Pixel angeben. Es ist z.B. auch möglich, eine ganze Zahl anzugeben, z.B. 1. In dem Fall gilt die Zahl für die x-fache der Rahmenbreite, die als Abstand verwendet wird.

Zwischenräume festlegen

Mit der Eigenschaft border-image-repeat wird festgelegt, wie die horizontalen und vertikalen Zwischenräume von einer Ecke des Rahmens zur anderen gefüllt werden sollen. Hierfür werden die mittleren Bilder an den Rändern des Bildes verwendet, die beim Aufteilen in 9 Bereiche entstehen. Als Werte kann man folgendes eingeben.

  • stretch: Das Bild wird gestreckt.
  • repeat: Das Bild wird gekachelt, bis der Zwischenraum gefüllt ist. Hierbei können Teilbilder entstehen.
  • round: Das Bild wird gekachelt, bis der Zwischenraum gefüllt ist. Allerdings kann bei nicht ganzzahliger Anzahl der Kacheln das Bild skaliert werden, damit die Kachelanzahl ganzzahlig ist und somit keine Teilbilder entstehen.
  • space: Die Unterstützung dieses Werts durch die Browser ist nicht unbedingt gegeben. Geplant war, dass damit das Bild gekachelt wird und bei nicht ganzzahliger Anzahl der Kacheln der Platz für das Teilbild mit einem Leerraum gefüllt wird.

Man kann einen oder zwei Werte angeben. Bei einem Wert gilt dieser für alle Zwischenräume. Gibt man zwei Werte ein, gilt der 1. Wert für die horizontalen und der 2. Wert für die vertikalen Zwischenräume.

Kurzschreibweise mit border-image

Die einzelnen Angaben können auch in einer Zeile über border-image angegeben werden. Das ist eine Shorthand-Eigenschaft für die Generierung von Rahmen auf Basis eines Bildes. Die Angaben erfolgen dabei in folgender Reihenfolge.

  1. border-image-source
  2. border-image-slice
  3. border-image-width
  4. border-image-outset
  5. border-image-repeat

Dabei ist die erste, zweite und fünfte Eigenschaft ein Pflichtfeld. Die übrigen Angaben sind optional. Ein Beispielcode.

.selektor {
border-image: url(bild.png) 20 round;
}

Browser-Präfix und Alternativrahmen für ältere Browser

Nicht alle Browser unterstützen die Generierung von Rahmen mit einem Bild. Bei manch älteren Browsern muss man einen Browser-Präfix verwenden. Für Browser, die auch mit einem Präfix nicht angesprochen werden können, kann man zusätzlich als Fallback einen normalen Rahmen anzeigen lassen, der auch transparent gestaltet werden kann. Ein Beispielcode.

.selektor {
border: 20px solid transparent; /* Fallback */
-webkit-border-image: url(bild.png) 20 round; /* Präfix für Safari */
-moz-border-image: url(bild.png) 20 round; /* Präfix für Firefox */
-o-border-image: url(bild.png) 20 round; /* Präfix für Opera*/
border-image: url(bild.png) 20 round; /* Reguläre Angabe */
}

Die Breite des Fallbacks-Rahmens sollte identisch wie die Breite des Bildrahmens sein.