CSS: Hintergrundbilder klickbar machen

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.

Ähnliche Nachrichten