, den 27.11.2008 (Letztes Update: 28.01.2016)

CSS: Hintergrundbilder klickbar machen

Mobile Helden
Mobile-Helden: CSS Hintergrund klickbar

Wer auf einer Webseite Hintergrundbilder per CSS einrichtet und diese aber klickbar machen will, der steht vor einer zunächst nicht ganz trivialen Aufgabe. Wir zeigen euch, wie es funktioniert.

Ich wollte 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, wie folgt.

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

Im Quellcode der HTML-Datei findet sich dann meist 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 in den Div-Container legt, passiert erst einmal 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 von #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 den kompletten Container ausfüllt, vergeben wir ihm das display-Attribut block. Dass sorgt dafür, dass der Header selbst dann klickbar ist, wenn darin kein Inhalt enthalten ist. Die Stilangabe schaut am Ende wie folgt aus:

#header a {
  background: url('header.png') no-repeat;
  display: block;
}
iPod-touch-Werbung bei Sport1
Würde dem Internet ein Memex gut zu Gesicht stehen?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



Zuletzt kommentiert