Rolf B: Link verlinken - Hintergrundbild verlinken und komplett klickbar machen

Beitrag lesen

Hallo Florian T.,

background-position: 0 -11rem;

Wasn das? Das Hintergrundbild ist um 11rem nach oben verschoben?! Hat der Body einen margin-top von 11rem und die Bildverschiebung soll das ausgleichen? Das ruft nach einem custom-property, um diese magische Nummer einzufangen.

Er will, dass das Hintergrundbild der Seite komplett anklickbar ist/ bzw. verlinkt ist.

Technische Antwort: Nein, das geht nicht. Ein background-image ist ein Dekorationselement und kann nicht mit dem Benutzer interagieren.

Zugängliche Antwort: Wer interaktive Elemente will, muss auch welche auf die Seite setzen. Ein click-Handler auf einem <img> Element ist zwar klick- und touchbar, aber ohne Maus oder Touchscreen funktionslos und deshalb unbedienbar.

Warnende Antwort: Ein vollflächiges interaktives Element, das auf Klick oder Touch irgendwohin springt, ist ein Patentrezept für Bissspuren in der Tischkante, denn wenn man mit dem Finger in einen mutmaßlich funktionslosen Bereich tippt und dann weggelinkt wird, ist das sehr unerwartet. Also: schlechtes Design.

Wenn dein Chef Sorge hat, dass die Besucherinnen und Besucher den Weg zur Folgeseite nicht finden, sollte man an der Stelle ansetzen.

Aber wenn der Chef den Pointy-Haired-Boss[1] spielen muss („komm mir nicht mit Fakten, ich habe meine Meinung“), dann müsstet ihr ein <a> Element erzeugen, dass als erstes Element im Body liegt (der Rest der Seite liegt dahinter, den Body ausfüllt und im Hintergrund liegt (position:absolute, width:100%; height: 100%; z-index:-1). Dieses <a> Element kann dann das Hintegrundbild tragen und ist anklickbar. In der Tab-Reihenfolge der Seite käme es als erstes, allerdings würde man beim Tabben den Fokusrahmen nicht erkennen weil es die Seite füllt. Letztlich also auch keine gute Benutzererfahrung.

Ggf. auch mit position:sticky; top:0; left:0; width:100vw;height:100vh, dann scrollt es nicht mit.

Wenn ihr schon anderweit negative z-index verwendet, nimm halt einen kleineren Wert.

Rolf

--
sumpsi - posui - obstruxi

  1. Dilbert... leider vor einem halben Jahr gecancelt worden, weil eine Aussage von Scott Adams als rassistisch empfunden wurde ↩︎