News & Rumors: 27. November 2008,

CSS: Hintergrundbilder klickbar machen

Screenshot Mobile-Helden: CSS Hintergrund klickbar
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.

Artikel bewerten

Ähnliche Beiträge

Gerücht: Apple an Motorradhersteller Lit interessi... Nach den Gerüchten über eine mögliche Übernahme oder Partnerschaft mit McLaren gibt es nun neue Berichte, nach denen Apple am Motorradhersteller Lit M...
Deutsche Umwelthilfe droht Apple wegen Elektroschr... Die Deutsche Umwelthilfe (DUH) hat ein Rechtsverfahren gegen Apple eingeleitet. Nach eigener Aussage weigert sich Apple, Elektroschrott zurückzunehmen...
McLaren: Keine Gespräche mit Apple In den letzten Tagen hatten Gerüchte die Runde gemacht, dass Apple mit dem Autohersteller McLaren in Übernahmegesprächen sei. Nun hat ein Sprecher von...
Keine News mehr verpassen! Unsere App für iOS und Android mit praktischer Push-Funktion.






Zuletzt kommentiert



 2 Kommentar(e) bisher

  •  Dominik (7. Dezember 2008)

    Hey, super! Danke für den Tipp! Bin rein zufällig auf den Blog gestoßen!

    Grüße aus BaWü

  •  Alexander Trust (9. Dezember 2008)

    Danke.

    Grüße zurück.


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>