Du öffnest die Startseite deines Shops und das Hero-Bild klebt von der linken Bildschirmkante bis zur rechten. Kein Rand, kein Atem, kein Header-Gefühl. Es sieht nicht nach Design aus, sondern nach Unfall.
Also machst du das Naheliegende: Du gehst ins CMS und drehst an den Einstellungen. Breite, Höhe, Anzeigemodus. Und du landest — das ist der Teil, den keiner erzählt — sehr wahrscheinlich in einer Sackgasse.
Ich habe genau das gerade in einem Shopware-6-Shop durchgespielt. Drei Anläufe, drei Einstellungsänderungen, und keine einzige davon hat das Problem gelöst. Gelöst wurde es erst, als ich aufgehört habe, am CMS zu schrauben.
Hier ist der ganze Weg, inklusive der Umwege. Damit du siehst, wovon ich rede, habe ich die einzelnen Zustände anschließend im Shopware-Demoshop nachgestellt.
Versuch 1: Der Container ist zu breit
Das Hero-Bild lief randlos über den kompletten Bildschirm. Ursache war schnell gefunden: Die CMS-Sektion stand auf Vollbreite (full_width) statt auf Boxed.
Man sieht es sofort, wenn man Logo und Navigation als Referenz nimmt: Die sitzen im Content-Container, das Bild nicht.
Der Unterschied ist simpel. Bei full_width dehnt sich der Inhalt über die gesamte Viewport-Breite, egal wie breit der Monitor ist. Bei boxed sitzt er im normalen Content-Container — also genau dort, wo auch dein Fließtext, deine Produktkacheln und dein Footer-Inhalt sitzen.
Umgestellt auf boxed, dazu die Höhe von 600 auf 340 Pixel reduziert, damit es flacher wirkt. Ergebnis: Das Bild sitzt jetzt bündig zum Rest der Seite. Sieht ordentlich aus.
Nur ist jetzt die Hälfte des Motivs weg.
Versuch 2: Dann eben nicht beschneiden
Der Anzeigemodus stand auf cover. Das bedeutet: Fülle den Block vollständig aus und schneide alles ab, was nicht reinpasst. Bei einem flachen Block und einem hohen Bild schneidet er oben und unten kräftig weg.
Die offensichtliche Gegenmaßnahme heißt contain: Zeige das Bild vollständig, koste es was es wolle.
Umgestellt. Und tatsächlich — nichts mehr abgeschnitten. Dafür schrumpft das Bild auf etwa 600 Pixel Breite zusammen, sitzt verloren in der Mitte, und links und rechts gähnen leere Flächen.
Ein Problem gegen ein anderes getauscht.
Versuch 3: Dann eben höher
Nächster Reflex: Wenn das Bild mehr Höhe bekommt, passt es doch komplett rein, ohne zu schrumpfen?
Stimmt. Nur bräuchte es dafür rund 725 Pixel Höhe. Und dann bin ich wieder bei dem wuchtigen Vollbild-Hero, von dem ich weg wollte.
An dieser Stelle wurde klar: Ich drehe im Kreis.
Der eigentliche Punkt: Es ist Geometrie, kein Bug
Rechnen wir das kurz durch, denn hier steckt die ganze Erkenntnis.
Der Container: Boxed bedeutet im Shopware-Standardtheme maximal 1320 Pixel Breite, abzüglich seitlichem Padding also etwa 1290 Pixel nutzbare Fläche. Die Höhe hatte ich auf 340 Pixel gesetzt.
1290 ÷ 340 = 3,79. Der Container hat also ein Seitenverhältnis von rund 3,8 : 1 — ein langer, flacher Streifen.
Das Bild: 1920 × 1080 Pixel. Das ist 16 : 9, also 1,78 : 1.
Und damit ist alles gesagt. Ein Bild mit Verhältnis 1,78:1 kann nicht gleichzeitig ein Loch mit Verhältnis 3,79:1 füllen. Das ist keine Frage der richtigen Einstellung, das ist Mathematik. Der Browser hat exakt drei Möglichkeiten:
- Beschneiden (
cover) — Bild füllt aus, Ränder fallen weg - Schrumpfen (
contain) — Bild bleibt komplett, Leerflächen entstehen - Verzerren (
stretch) — Bild passt, sieht aber grauenhaft aus
Es gibt keine vierte Option. Der Anzeigemodus entscheidet nur, welchen Kompromiss du eingehst — nicht, ob du einen eingehst.
Das Hero-Trilemma
Kurzfassung zum Merken:
Volle Breite · Bild komplett sichtbar · flacher Header Du kannst zwei davon haben. Nie alle drei.
Jedenfalls nicht, solange du am CMS schraubst.
Die Lösung: Ändere das Bild, nicht die Einstellungen
Sobald das klar ist, ist der Rest trivial. Wenn das Bild dasselbe Seitenverhältnis hat wie der Container, verschwindet der Kompromiss einfach. Nichts wird beschnitten, nichts schrumpft, nichts verzerrt.
Der Container will 3,8:1. Also braucht das Bild 3,8:1.
Konkret exportiert: 2560 × 670 Pixel. Das ergibt ein Verhältnis von 3,82:1 gegenüber 3,79:1 im Container — eine Abweichung von unter einem Prozent, also praktisch null Beschnitt.
Warum 2560 und nicht 1290? Wegen der hochauflösenden Displays. Ein Retina-Screen stellt die 1290 CSS-Pixel physisch mit der doppelten Pixelzahl dar. Ein Bild in exakter Containergröße wirkt dort weich. Also: Container-Breite mal zwei.
Neues Bild hochgeladen, Anzeigemodus zurück auf cover, fertig. Flacher Header, volle Breite, ganzes Motiv sichtbar. Alle drei Punkte des Trilemmas — weil ich den Container nicht mehr überlistet, sondern bedient habe.
Die Checkliste
Für das nächste Mal, in vier Schritten:
- Container ausmessen. Nicht schätzen. Rechtsklick auf den Hero-Bereich, „Untersuchen", Breite und Höhe des Elements ablesen. In den Dev-Tools steht die tatsächliche Pixelzahl.
- Verhältnis rechnen. Breite geteilt durch Höhe. Das ist deine Zielvorgabe.
- Bild exportieren. Container-Breite verdoppeln für Retina, Höhe entsprechend dem Verhältnis. Beispiel: 1290 × 340 → exportiere 2580 × 680.
- Auf
coverstellen. Bei passendem Verhältnis istcoverunproblematisch und fängt kleine Abweichungen sauber ab.
Der Teil, den fast alle vergessen: Mobil
Hier hört die Mehrheit der Anleitungen auf. Zu Unrecht, denn auf dem Handy fängt das Problem von vorne an.
Der Container ist auf dem Smartphone nur noch etwa 350 Pixel breit. Die Höhe von 340 Pixeln bleibt aber. Aus deinem eleganten 3,8:1-Streifen wird also ein nahezu quadratischer Block — Verhältnis etwa 1:1.
Und dein wunderschön auf 3,8:1 zugeschnittenes Bild wird darin links und rechts brutal beschnitten. Sichtbar bleibt nur ein schmaler Streifen aus der Mitte.
Nachgemessen im Demoshop: 350 × 340 Pixel. Aus 3,79:1 auf dem Desktop wird 1,03:1 auf dem Handy — mit demselben Bild.
Zwei Gegenmaßnahmen:
- Motiv mittig halten. Was auf dem Desktop am linken oder rechten Rand sitzt — Logo, Störer, Text — ist auf dem Handy weg. Alles Wichtige gehört in die mittleren 30 Prozent.
- Höhe für Mobil reduzieren. Ein Wert von etwa 200 Pixel bei 350 Pixel Breite ergibt wieder ein halbwegs querformatiges Verhältnis. Das lässt sich per CSS-Klasse am Block oder über Theme-Anpassungen lösen.
Wer es ganz sauber will, liefert zwei Bildvarianten aus — eine breite fürs Desktop, eine kompaktere fürs Handy. Mehr Aufwand, aber das einzige Vorgehen, das auf beiden Geräten wirklich kontrolliert aussieht.
Was ich mitgenommen habe
Der Fehler war nicht die falsche Einstellung. Der Fehler war die Annahme, dass es eine richtige Einstellung gibt.
cover, contain, boxed, full_width, minHeight — das sind alles nur Antworten auf die Frage „Wie gehe ich mit dem Missverhältnis um?". Keine davon beseitigt das Missverhältnis. Wenn Bild und Container nicht zusammenpassen, schiebst du das Problem nur hin und her.
Wenn du dich das nächste Mal beim dritten Wechsel des Anzeigemodus ertappst: Hör auf zu klicken und rechne einmal kurz nach. Zwei Divisionen, dreißig Sekunden. Danach weißt du, ob du überhaupt ein CMS-Problem hast — oder ob du eigentlich in Photoshop sein solltest.
Meistens ist es Letzteres.
Nächster Schritt
Miss einmal deinen eigenen Hero-Container aus — Rechtsklick, „Untersuchen", Breite durch Höhe. Wenn die Zahl nicht zum Seitenverhältnis deines Bildes passt, weißt du jetzt, warum du im CMS nicht weiterkommst.
Du kommst nicht auf ein Verhältnis, das auf Desktop und Handy gleichzeitig funktioniert? Schick mir die URL deiner Startseite über das Kontaktformular, ich messe einmal nach und sage dir, welches Exportmaß dein Bild braucht.
