Sajonara.de – Internetmagazin

Geht nicht? Gibt’s nicht. Richtig. Manchmal ist es nur eine Frage der Zeit, bis Dinge realisierbar wären. Für meine Seite Mobile Helden wollte ich gerne das via CSS-Stilvorlage eingebundene Hintergrundbild im Header des Dokuments klickbar machen.

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 selbstredend?! ü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. In Aktion bei Mobile Helden einzusehen.

Hinzufügen zu del.icio.us, Mr. Wong, LinkARENA, SEOigg
Tags anchor, background, CSS, Hintergrund, Hintergrundbild, klickbar, Link, url
Kategorie Media · Autor Alexander Trust · 2 Kommentare