Thumbnail vs. Hintergrund – ZenBlocks buttonBasic
Fazit
Das **Thumbnail** ist ein eigenstaendiges Bild im Knopf. Der **Hintergrund** ist die Flaeche hinter dem gesamten Knopf-Inhalt. Fuer ein konkretes Motiv: Thumbnail. Fuer Stimmung/Look: Hintergrund.
—
Vergleich
| Kriterium | Thumbnail | Hintergrundbild |
|—|—|—|
| Position | Interner Bildbereich im Knopf | Gesamter Knopf-Hintergrund |
| Bezug zum Text | Neben oder ueber/unter Text | Text liegt darueber |
| Groessensteuerung | Eigene `Breite`/`Höhe` | `Background Größe` (`cover`, `contain` usw.) |
| Hover | Groesse/Position veraenderbar | Aenderung ueber Überlagerung/Farbe |
| Video | Nein | Ja |
| Überlagerung | Nein | Ja |
| Radius | Eigener Radius moeglich | Folgt meist Knopf-Radius |
| Responsive | Pro Geraet steuerbar | Pro Geraet steuerbar |—
Entscheidungshilfe
### Thumbnail nutzen wenn
1. Produkt, Logo oder Motiv klar gezeigt werden soll.
2. Text und Bild kombiniert im Knopf stehen sollen.
3. Bildstil (Rahmen/Radius) separat gesteuert werden soll.
4. Ein Hover-Zoom auf dem Bild gewuenscht ist.### Hintergrund nutzen wenn
1. Gesamtwirkung des Knopfs gestaltet werden soll.
2. Text auf Foto mit Überlagerung liegen soll.
3. Video als Hintergrund gebraucht wird.
4. Unterschiedliche `Standard/Hover`-Hintergruende gewuenscht sind.### Beides kombinieren
Moeglich und oft sinnvoll:
– Hintergrund fuer Stimmung,
– Thumbnail fuer konkretes Motiv,
– CTA-Text fuer die Aktion.—
Hinweise
– Thumbnail nutzt `object-fit`; je nach Seitenverhaeltnis kann beschnitten werden.
– Zu starkes Überlagerung kann den Hintergrund unsichtbar machen.
– Schwere Medien (Thumbnail + Hintergrund) bremsen die Seite.—
Verwandte Einstellungen
– [Vorschaubild-Einstellungen](../thumbnail/)
– [Hintergrundeinstellungen](../background/)
– [Layout-Einstellungen](../layout/)