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.



CSS: Hintergrundbilder klickbar machen
4,2 (84%) 20 Bewertungen

Ähnliche Beiträge

iPhone 6s: Akku-Tausch mit Seriennummer überprüfen... Apple hat ein neues Webformular in die Welt gesetzt, mit dem Kunden anhand der Seriennummer des iPhone 6s überprüfen können, ob ihr Gerät Teil der kos...
Apple Maps: Apple setzt bald Drohnen ein Apple möchte gegenüber Google Maps weiter aufholen und wird bald zur Verbesserung des eigenen Kartendiensts Apple Maps auf die speziellen Fähigkeiten ...
AirPods: Auslieferung soll bald beginnen Die verzögerte Einführung der AirPods steht einer E-Mail von Tim Cook zufolge bevor. Die neuen Funk-Kopfhörer sollen „in den nächsten Wochen“ ausgelie...
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>