Bilderrahmen mit CSS

Einbettung von Bildern

Zur Einbettung von Bildern in ein HTML-Dokument gibt es das <img>-Element. Mit Angaben zur Bildquelle, einer Breite und einer Höhe sowie einem Alternativtext und optional einem Titeltext ist die Anzeige recht unspektakulär, wie das nachfolgende Beispiel zeigt.

Der HTML-Code ist für alle Beispiele weitestgehend identisch und ist unten dargestellt. Das img-Element bekommt über eine CSS-Klasse die jeweiligen Eigenschaften zugewiesen.

  <img class="xxx" src="images/rahmendemo_s.jpg"
       alt="Rahmendemo" title="Rahmendemo"
       width="300" height="225">
  

Und so sieht das Ergebnis aus:

Wie gesagt, recht unspektakulär.

Spielereien mit CSS

Mit Hilfe von CSS gibt es nun die Möglichkeit, das Aussehen des eingebetteten Bildes zu beeinflussen. Mögliche CSS-Eigenschaften sind Außenabstand (margin), Innenabstand (padding), Rahmenstärke, Rahmenstil und Rahmenfarbe (zusammengefasst in border) sowie verschiedene Hintergrundeigenschaften (zusammengefasst in background).

Man kann dem Bild z.B. einen farbigen Rahmen verpassen:

  img.rahmen-1 {
    border: 1px solid #ff0000
  };
  

Durch Hinzunahme von etwas Innenabstand wird der Rahmen auf Distanz zum Bild gebracht.

  img.rahmen-2 {
    padding: 1em;
    border: 1px solid #000000
  }
  

Auch ein Bild kann eine Hintergrundfarbe besitzen, die natürlich erst dann sichtbar wird, wenn das Bild mit padding ausgestattet ist.

  img.rahmen-3 {
    padding: 1em;
    border: 0 none;
    backgrond: #98ff98
  }
  

Die Dicke des Rahmens kann durchaus auch größer als 1 Pixel sein. Sogar relative Angaben in em sind möglich. Wenn dann für border-top, border-right, border-bottom und border-left unterschiedliche Farben angegeben werden, ergeben sich interessante Effekte.

  img.rahmen-4 {
    padding: 0;
    border-top: 18px solid #777777;
    border-right: 18px solid #999999;
    border-bottom: 18px solid #bbbbbb;
    border-left: 18px solid #dddddd
  }
  

Ein doppelter Rahmen entsteht durch die Kombination von padding und border.

  img.rahmen-5 {
    padding: 1em;
    border: 1em solid #cccccc;
    background: #888888
  }
  

Geschachtelte Elemente

Interessante Effekte ergeben sich auch, wenn sich das Bild innerhalb eines anderen Elements befindet und beide unterschiedlich formatiert werden. Z.B. lassen sich so Fotoecken realisieren, die sich automatisch der Größe des Bildes anpassen. Die beiden Grafiken sowie werden zur Gestaltung verwendet. Im umgebenden div wird das Hintergrundbild oben links, im img selbst unten rechts angezeigt. Im Stylesheet wird dazu notiert:

  div.rahmen-6 {
    background: transparent url(images/rahmendemo_bg_tl.png) top left no-repeat
  }

  div.rahmen-6 img {
    padding: 1em;
    background: transparent url(images/rahmendemo_bg_br.png) bottom right no-repeat
  }
  

Der HTML-Code ist

  <div class="rahmen-6">
  <img src="images/rahmendemo_s.jpg"
       alt="Rahmendemo" title="Rahmendemo"
       width="300" height="225">
  </div>
  

Das Ergebnis sieht so aus:

Wenn das Bild auf die Hälfte seiner Größe reduziert wird, haben die Ecken immer noch den richtigen Abstand.

"Beschriftung" eines Bildes

Durch Verschachtelung kann das Bild auch "beschriftet" werden. Der Text innerhalb eines span wird dazu im umgebenden div absolut positioniert.

Angaben im Stylesheet:

  div.rahmen-7 {
    position: relative
  }

  div.rahmen-7 img {
    padding: 1em;
    background: #cccccc
  }

  div.rahmen-7 span {
    position: absolute;
    bottom: 1.5em;
    left: 1.5em;
    color: #ffffff
  }
  

position: relative im übergeordneten div ist notwendig, damit der Text absolut zu diesem Element positioniert wird.

Das HTML-Dokument sieht so aus:

  <div class="rahmen-7">
  <img src="images/rahmendemo_s.jpg"
       alt="Rahmendemo" title="Rahmendemo"
       width="300" height="225">
  <span>Pleumeur-Bodou (Bretagne)</span>
  <div>
  

Und hier ist das Ergebnis zu sehen.

Pleumeur-Bodou (Bretagne)

Die Beschriftung ist leider immer noch nicht im Internet Explorer zu sehen. Dies liegt daran, dass das übergeordnete div kein "Layout" hat. "Layout" ist ein Konzept des Internet Explorers, das bestimmt, wie Elemente ihren Inhalt darstellen, wie diese gezeichnet werden und mit anderen Elementen in Beziehung stehen.

Es gibt eine Reihe von Elementen, die grundsätzlich "Layout" haben. Dazu gehören u.a. html, body, img, fieldset und einige weitere, aber kein div. Die Lösung des Problems liegt nun darin, dem übergeordneten div "Layout" zu geben. Das kann durch Zuweisung von bestimmten CSS-Eigenschaften erfolgen. Durch Ergänzung von display: inline-block bekommt das div ein Layout, so dass der Beschriftungstext innerhalb des span sichtbar wird.

Angaben im Stylesheet:

  div.rahmen-8 {
    display: inline-block;
    position: relative
  }

  div.rahmen-8 img {
    padding: 1em;
    background: #cccccc
  }

  div.rahmen-8 span {
    position: absolute;
    bottom: 1.5em;
    left: 1.5em;
    color: #ffffff
  }
  

Das HTML-Dokument sieht so aus:

  <div class="rahmen-8">
  <img src="images/rahmendemo_s.jpg"
       alt="Rahmendemo" title="Rahmendemo"
       width="300" height="225">
  <span>Pleumeur-Bodou (Bretagne)</span>
  <div>
  

Nun ist der Text auch im Internet Explorer zu sehen. Mozilla und Firefox stellen Bild und Text auch hier wie gewünscht dar. Opera jedoch zeigt den Beschriftungstext innerhalb des span nicht an. Es ist also sinnvoll, die Eigenschaft display: inline-block über einen CSS-Hack nur für den Internet Explorer sichtbar zu machen.

Pleumeur-Bodou (Bretagne)