✔ Bild als Hintergrundbild verwenden

[MichaA]

Hallo,

ich bin neu in der Webentwicklung und habe folgendes Mini-Problem. Es soll ein Bild angezeigt werden, welches nicht angeklickt bzw heruntergeladen werden können, aber ein Title besitzen soll.

Ich habe es zwar schon gelöst, jedoch bin ich mit der Lösung nicht so zufrieden.

        <style>
            .cellinvalid {
                background: url(content/images/ValidationError_16x16.png) no-repeat;
                width: 18px;
                display: inline-block;
            }
        </style>

<div class="cellinvalid" title="Hier kommt der Grund">&nbsp;</div> IrgendEinZellInhalt

Jetzt stören mich jedoch zwei Dinge. Zum einen muss ich ein Div einfügen, um das Bild zu erhalten. Zum anderen muss ich ein   einfügen, damit das Div überhaupt dargestellt wird.

Gibt es für eine Problemstellung bessere Lösungen? Ich wäre überrascht, wenn nicht. Ach ja, an das übergeordnete Div, also das Div, indem das alles hier landet, komme ich nicht ran.

Danke schon mal im voraus.

Michael

 

[SpiceLab]

Das Hintergrundbild schützt keineswegs vor dem unerwünschten Download der Grafikdatei

Der direkte Weg wäre über rechter Mausklick -> Hintergrundgrafik anzeigen -> Grafik speichern unter möglich, ansonsten über Umwegen jederzeit aus dem Browsercache herauszufischen, und mit den gängigen Developer-Tools hat man ebenso Zugriff auf die Hintergrundbilder.

Von daher könntest du auch direkt das <img>-Element verwenden.

Ein Hintergrundbild benötigt nunmal ein HTML-Element, in dem es gezeigt werden kann

Wenn zur Bildbreite auch die Bildhöhe bekannt ist, würde sie das erzwungene Leerzeichen im HTML ersetzen.

 

[MichaA]

Ja, Bildhöhe und breite ist bekannt (16px x 16px). Mir gehts auch nicht um Kopierschutz, sondern dass die Zelle nicht durch andere Elemente (in dem Fall das Bild) unterbrochen wird. Wie müsste ich das jetzt machen, damit ich das Leerzeichen nicht machen muss?

 

[SpiceLab]

.cellinvalid {
  background: url(content/images/ValidationError_16x16.png) no-repeat;
  width: 16px;
  height: 16px;
  display: inline-block;
}

 

[MichaA]

So einfach kann es sein . Danke nochmal für die Hilfe. Beschäftige mich erst seit ein paar Tagen mit web und stelle daher noch Anfängerfragen.

Jetzt läuft es wohl darauf hinaus, dass das Markup wie folgt aussehen wird:

<div class="cellinvalid" title="Hier kommt der Grund">IrgendEinZellInhalt</div>

Da stellt sich mir ein leicht verändertes Problem. Ich muss jetzt zwar kein Leerzeichen mehr einfügen, aber wenn die Zeilenhöhe größer wird, z.B. weil die Schriftart größer gestellt wird, dann wird das Background Bild nicht vertikal zentriert dargestellt. Schließlich fängt ein Background auch immer ganz oben an. Ist das überhaupt noch möglich in diesem Fall vertikal zu zentrieren?

 

[SpiceLab]

Auch das ist kein Problem:

background: url(content/images/ValidationError_16x16.png) no-repeat left center; /* Hintergrundbild wird links mittig positioniert */

 

[MichaA]

oh danke schön. Geht ja einfacher als gedacht.

Ist mein Vorgehen überhaupt grundsätzlich richtig? Zur Erklärung: Es wird eine Web-Anwendung in der ein Grid dargestellt wird. Das Grid verwendet keine Table Tags, sondern Divs. Der eine oder andere kennt vielleicht das Slick Grid.

Hier geht es jetzt um den Inhalt einer "Zelle" bzw dessen Validierung. Bei falscher Eingabe wird die Klasse Cellinvalid gesetzt. Per CSS möchte ich dann am Anfang der Zelle ein Bild, für die bessere Kenntlichmachung der Fehleingabe, darstellen. Dieses Bild soll ein Tooltip haben, was ich derzeit über Title löse.

Damit das Bild nicht den Inhalt der Zelle "unterbricht", dachte ich mir, dass ich es als Hintergrund Bild verwende.

 

[SpiceLab]

Dagegen spricht in meinen Augen auch nichts

 

[MichaA]

super. Erste Erfolgserlebnisse sind doch was feines