CSS: Hintergrundbilder klickbar machen

Screenshot Mobile-Helden: CSS Hintergrund klickbar

Für eine Webseite wollte ich gerne das via CSS-Stilvorlage eingebundene Hintergrundbild im Header des Dokuments klickbar machen. Das ist nicht so einfach, wie es sich auf den ersten Blick anhört.

Angenommen in der Stilvorlage für den Header-Container findet sich eine Angabe zur Verwendung eines Hintergrundbildes.

#header {
  background: url('header.png') no-repeat;
}

Im Quellcode der HTML-Datei findet sich dann einfach nur der DIV-Container. Ausmaße und Position werden über die Stilangaben an den Browser übergeben.

<div id="header"> ... </div>

Wenn man einen Anchor-Tag um den Div-Container legt, passiert nichts.

<div id="header"><a href="home.html"> ... </a></div>

Das liegt daran, dass der Div-Container im Prinzip leer ist. Lediglich alle Elemente, die von dem anchor-Tag eingeschlossen werden, wären klickbar. Das Hintergrundbild gehört nicht dazu. Über einen Umweg kriegen wir die Hintergrundgrafik dennoch klickbar. Und zwar übergeben wir die Stilangaben „#header“ an den anchor-Tag.

#header a {
 background: url('header.png') no-repeat;
}

Nun ist der Link im #header-Div-Container derjenige, der das Hintergrundbild enthält. Damit dieser jedoch den kompletten Container ausfüllt, auch ohne Inhalt, müssen wir ihn mittels Stilangabe mit dem display-Attribut „block“ ausstatten. Die Stilangabe schaut dann am Ende wie folgt aus:

#header a {
 background: url('header.png') no-repeat;
 display: block;
}

Et voilà, das Hintergrundbild ist klickbar.

Mehr über Alexander Trust:

Bekam seinen ersten PC mit sieben Jahren, einen XT mit 4 MHz und Monochrom-Monitor. Registrierte die erste Domain im Jahr 1998, vorher auch in Mailboxen aktiv, bei AOL und Compuserve. Studierte Computer Science (Anwendungsentwicklung) in Wuppertal und Informatik und Soziologie, Linguistik und Literatur in Aachen. Veröffentlichte bereits einen Roman.

Metadaten
  • Geschrieben am: 27. November 2008
  • Zuletzt aktualisiert am: 2. März 2021
  • Wörter: 185
  • Zeichen: 1562
  • Lesezeit: 0 Minuten 48 Sekunden