Link verlinken - Hintergrundbild verlinken und komplett klickbar machen

[Florian T.]

Hallo zusammen,

ich konnte zu meinem Problem in der Suche nichts finden, deshalb wollte ich dieses Thema erstellen.

Folgende Situation:

Ich arbeite im Marketing und unsere Seite läuft über HTML/CSS. Die Dateien werden auf AWS Console hochgeladen und somit veröffentlicht.

Wir haben die Seite erneuert und dabei mit einem Freelancer zusammen gearbeitet, der jetzt fertig mit dem Auftrag ist und somit nicht mehr verfügbar.

Es ist auch alles so weit in Ordnung, jedoch hat mein Chef eine (zugegeben seltsame) Bitte:

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

Das Hintergrundbild ist eingefügt im CSS durch:

CSS
.hero {
background-image: url("../../assets/img/header.svg");
background-size: cover;
background-position: 0 -11rem;
background-repeat: no-repeat;

Ich muss also sozusagen irgendwie einen Link verlinken und habe keine Ahnung, ob das überhaupt möglich ist. Ich habe viel gegoogelt, konnte jedoch wirklich nichts finden, was meinem Problem ähnelt, außer eventuell dieser Post.

Ich konnte damit jedoch nichts anfangen, da ich selbst nicht code. Ich kenne mich lediglich nur so weit aus, dass ich einige Änderungen in der index.html vornehmen kann und eventuell mal im style.css nachsehen kann, aber das wars.

Ich hoffe, dass mir jemand behilflich sein kann und wäre sehr dankbar!

[Rolf B]

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

---

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

[Felix Riesterer]

Lieber Florian,

jedoch hat mein Chef eine (zugegeben seltsame) Bitte:

Du solltest Deinen Chef gut beraten und deswegen darin weiterbilden, dass sein Ansinnen die Besucher von eurer Seite vertreibt. Das tut es, weil es dagegen verstößt, wie Besucher seit Jahrzehnten(!) gewöhnt sind, wie sich Webseiten bedienen lassen. Deswegen sollte sein Ansinnen auf keinen Fall umgesetzt werden.

Der Kopfteil einer Seite mit dem Logo wird gerne als Home-Link umgesetzt (z.B. Youtube) und darf auf die Startseite verlinken. Besucher kennen das. Aber nicht das seitenfüllende Hintergrundbild dafür zweckentfremden!

Liebe Grüße

Felix Riesterer

[Raketenwilli]

Das tut es, weil es dagegen verstößt, wie Besucher seit Jahrzehnten(!) gewöhnt sind, wie sich Webseiten bedienen lassen. Deswegen sollte sein Ansinnen auf keinen Fall umgesetzt werden.

Es sei denn, er will Böses[tm]. Zum Beispiel, dass jeder Klick oder Fingerstubs auf die Seite zum Aufscheinen einer Warnung führt, dass der Rechner des Betrachters verseucht sei und ich mir endlich von einer Seite mit Berhard S. und Mario D. im Impressum einen tollen Virenscanner für Windows herunterladen soll, der dann bei mir (mangels Modem) nicht mal unter wine läuft...

---

P.S. Umstieg im Gange: Ich habe den zunehmenden Kontrollverlust, die steigende Fehlerhäufigkeit in Ubuntu und die anderen Merkwürdgkeiten der Snaps (die Ubuntu gerade nicht im Griff hat) satt: Zurück zu Debian.

[Felix Riesterer]

Lieber Raketenwilli,

Zurück zu Debian.

warum kein Mint?

Liebe Grüße

Felix Riesterer

[Raketenwilli]

warum kein Mint?

Weil ich (wohl auch auf Grund der Wahl) schon fertig bin. Und alles sieht genau so aus wie vorher...

... vieles funktioniert nun aber überhaupt wieder oder besser. Der andere Teil steht bei Wikipedia...

„Die Hauptausgabe, einfach Linux Mint genannt, basiert auf der Linux-Distribution Ubuntu“ - das wollte ich gerade loswerden.

Satz 2:

„Die zweite Ausgabe, LMDE (Linux Mint Debian Edition), beruht auf Debian und enthält als Desktop-Umgebung nur Cinnamon.“

Cinnamon wollte ich auch nicht.