Positionierung von Bildern und Texten

Das saubere Platzieren von Texten vor Bildhintergründen ist im Responsive Design essentiell. Hier sind Flexbox-basierte Techniken zusammengetragen.

Flexbox: Zentrierter Text

Flexbox funktioniert auch mit nur einem Element wunderbar. Man nehme ein Hintergrundbild und platziere den Text als Flexbox!
Ein aria-label-Attribut erschließt auch Screen-Readern den Context.

Aktuell werden Bilder wieder direkt über das <img> Tag eingebunden (siehe gridbasiertes Hero. Die Flexboxlösung funktioniert aber weiterhin.

Hintergrundbilder

.bg {
  background: url('../img/1.png'), url('../img/2.png'), url('../img/3.png');
}

und

<div class="bg"></div>

geben die drei spezifizierten Bilder in dem div aus.

Hintergrundbilder werden asynchron mit niedriger Priorität geladen.

Größere Bilddateien werden möglicherweise zeitversetzt nachgeladen.

Die Hintergrundbilder können mit weiteren Atributen an die Anforderungen angepasst werden.

width, height: Größenangaben: absolut (px), relativ (em, rem) oder prozentual ( %, vw, vh)
background-size: Kombination aus width + height, alternativ auto, cover, contain

cover stellt den kleinstmöglichen Bildausschnitt dar, ohne die Proportionen zu verändern. Überschüssige Bereiche werden abgeschnitten.
contain stellt den größtmöglichen Bildauschnitt dar. Es kann Leerräume geben, die mit der Hintergrundfarbe oder dem Bild (background-repeat: repeat) ausgefüllt werden.
auto stellt das Bild im gegebenen Format dar, verändert die Proportionen.

Positionierung von Text

Fügt man dem HTML-Element Text hinzu, wird dieser typischerweise oben links angezeigt. Mittels Flexbox kann die Positionierung elegant eingestellt werden.

Hier als Beispiel die Definition des Schriftzugs auf der Titelseite des Hieronymus-Blogs (Stand 10/22)

.hero {
  background: url("images/titelbild.jpeg") no-repeat center right;
  background-size: cover;                /* Bildausschnitt    */
	color: var(--sl-color-amber-400);      /* Textfarbe: gelb   */ 
	padding: var(--sl-spacing-x-large);    /* Abstand zum Rand  */
  display: flex;
	align-items: flex-end;                 /* Anordnung: Unten! */
	justify-content: center;               /* Anordnung: mittig */
	height: 30vh;                          /* Bildgeometrie     */
	width: 100vw;
  }

Das Bild wird stets das obere Drittel des Fensters ausfüllen. Der Schriftzug ist mittig angeordnet und hat einen variablen Abstand zum unteren Bildrand. Die Farbe wird auf der Ebene des Bildes eingestellt. Andere Attribute werden im Logo selbst definiert:

& logo {
		font-family:             var(--display-serif);
		text-shadow: 3px 3px 3px var(--sl-color-gray-700);
		font-size:               var(--sl-font-size-3x-large);
		letter-spacing:          var(--sl-spacing-2x-small);
		font-weight:             var(--sl-font-weight-bold);

Schließlich das HTML:

<header class='hero'
  <logo> Hieron<letter>y</letter>mus</logo>
</header>

Bilddarstellung in sl-cards

sl-card stellt Bilder üblicherweise über den Slot image dar.

<sl-card class="card-image">
  <img
    slot="image" src="" alt=""
  />
  text
</sl-card>

Dann platziert die Komponente das Bild als Header-Image.

Was aber, wenn das Bild unterhalb des Titels und links neben dem Teaser platziert werden soll?

Für die Hieronymus Webseite wurde folgende Flexbox-basierende Lösung gewählt.

sl-card 
  div slot=header  
    Titel 
    div.content-wrapper --> flexbox
    Image 
    div { Teaser  Button }

Die Struktur ist in der Komponente PostCard hinterlegt.

Im CSS (postcard.css) ist content-wrapper als Flexbox konfiguriert (display: flex). Das Photo ist ein normales Image:

``` sl-card div.content-wrapper img { object-fit: cover; height: 25vh; min-height: 150px; aspect-ratio: 900/600; }

Das Ergebnis ist ein wunderbar skalierendes Bild, dass in allen Dimensionen etwaein Drittel des sl-card-Objects einnimmt.