CSS Kochbuch

2.17 »Pull-Quotes« mit Bildern

Problem

Eine »Pull-Quote« soll auf beiden Seiten mit Bildern, beispielsweise geschweiften Klammern, versehen werden, wie in Abbildung 2-24 gezeigt.

Abbildung 2-24. Eine »Pull-Quote« mit Bildern

Lösung

Benutzen Sie das Element blockquote, um den Inhalt der »Pull-Quote« zu kennzeichnen:

<blockquote>
 <p>Ma quande lingues coalesce, li grammatica del resultant
 lingue es plu simplic e regulari quam ti.</p>
</blockquote>

Danach definieren Sie die Stile für die »Pull-Quote«. Dabei platzieren Sie ein Bild im Hintergrund des blockquote-Elements und das andere im Hintergrund des p-Elements:

blockquote {
 background-image: url(bracket_left.gif); ...