Hintergrundbild mit einem Linkbereich versehen
Möchte man auf einem grösseren CSS-Hintergrundbild einen Link anbringen, z.B. um den Bereich des Logos mit der Homepage zu verlinken, so muss man ein bisschen in die Trickkiste greifen, denn Imagemaps oder dergleichen lassen sich nur auf direkt im HTML platzierte Bilder anwenden.
Zudem scheint es sinnvoll, dass Link und Logotext auch im Quelltext sauber und mit semantischer Bedeutung aufgeführt sind, damit auch Suchmaschinen und Screenreader von dieser Information profitieren können.
Folgendes Bild soll im Kopfbereich einer Website als Hintergrundbild eingefügt werden:
Dazu verwende ich folgenden Code:
und im CSS:
#header {
background: url(/pictures/css_tut_header.jpg) no-repeat;
height: 120px;
}
Nun soll der Bereich, wo das Logo im Bild steht verlinkt werden. In den div setzte ich deshalb eine Überschrift, in der ich einen sinnvollen, dem Logo entsprechenden Text verlinke.
Und schon fast geschafft; noch einige Zeilen CSS: Nun wird der div noch relativ positioniert, damit wir den h1 absolut dazu ausrichten können. Im h1 a Selektor nun noch den Link als Block definieren, die genaue Grösse des klickbaren Linksbereichs angeben und die Positionierung vornehmen. Zu guter Letzt bleibt uns nur noch den Text mit einem grossen negativen Wert aus dem Browser-Viewport schieben:
#header {
background: url(/pictures/css_tut_header.jpg) no-repeat;
height: 120px;
position: relative;
}
#header h1 a {
position: absolute;
top: 15px;
left: 14px;
display: block;
width: 238px;
height: 45px;
text-indent: -9999px;
}
Die fertige Version ist hier zu finden.
Am 10. September 2007 um 21:58 Uhr
cool. freue mich richtig, bis ich endlich wieder was mit css ausprobieren kann. momentan beschäftige ich mich mit einer lustigen datei namens „.htaccess“ in bezug zu permalinks. und ich bin am verzweifeln – echt. schreib doch was dazu 😉
Am 17. Februar 2008 um 02:20 Uhr
Klasse Tip! Danke.
Allerdings, was mach ich bei einer zentriert (mit fixem Layout) neu angelegten CSS-Site? Da rutscht der klickbare Bereich ja, je nach dem wie groß das Browserfenster ist, unberechenbar herum und steht nicht immer über dem logo. Sicher, ich muss den nur groß anlegen und weit genug nach rechts laufen lassen, aber leider sieht man dann ja nach Browser diesen erweiterten Klickbereich beim Klick als dünnen Rahmen – sieht etwas unhübsch aus. Na, ist aber dennoch ne gute Idee! 🙂
Übrigens: Was mich gerade noch mit Safari (3/Mac) nervt 😉 ist, das mein Header-Bild gar nicht erst angezeigt wird, heul. Ich hatte da schon mal einen funktionierenden Hack für mein WordPress, aber ich habs völlig vergessen, wie das noch ging. Hat du ne Idee?
Grüße!
Am 27. Februar 2009 um 11:52 Uhr
Vielen lieben Dank, ich steh zwar noch ziemlich am Anfang mit dem Thema css, aber der Beitrag hat mir unendlich weitergeholfen. Ich bin gerade dabei eine fremde Seite in css umzuarbeiten, ich hoffe, dass ich jetzt bald so weit bin, es fehlen noch 3 Seiten. Anschließend muss ich dann noch meine eigenen Seiten umsetzen. Der Weg sich selbst etwas beizubringen ist ziemlich zeitraubend und beschwerlich, aber dann sitzt es auch. Jedenfalls bin ich für solche Tipps sehr sehr dankbar und finde es toll, wenn Profis Anfängern weiterhelfen.
Am 6. Mai 2009 um 18:58 Uhr
@Clemens: Hmm, ich versteh nicht ganz was du meinst. In meinem Beispiel wäre das Layout mit fixer Breite ja zentriert, oder?
Wenn ich dem Eltern-Element
#headereine relative Position gebe, dann wird das darin liegende Element#header h1 aja absolut zum Elternelement positioniert. Somit sollte der Link immer an der korrekten Stelle stehen, auch bei einem Vergrössern des Fensters.Den dünnen Link-Rahmen aus Firefox bringst du über
a:link { outline: none; }zum verschwinden.Am 9. Oktober 2009 um 11:12 Uhr
Hi,
eine coole Sache.
Was ich jedoch nicht schaffe damit ist den Linkbereich
vertikal mittig, horizontal rechtsbündig zu bekommen.
Hat jemand eine Idee?
Am 23. November 2009 um 11:48 Uhr
@tiberius: Das wäre dann so? Beispiel mit flexibler Höhe