From b728d3f89d8311fc13cc6b9ad21d7f9439b1d921 Mon Sep 17 00:00:00 2001 From: Dogfather Date: Fri, 31 Jul 2026 18:21:53 +0200 Subject: [PATCH] Hintergrundbilder fuellen jetzt die volle Breite randlos Nach dem letzten Schritt (ganzes Bild sichtbar, contain) kam die Rueck- meldung: super, aber die Breite soll jetzt randlos ausgefuellt sein. - .page-bg und .hero-artwork: background-size von contain auf 100% auto. Breite ist immer exakt randlos voll, Hoehe skaliert im selben Seitenverhaeltnis mit. Passt das Bild oben/unten nicht ganz in den Kasten, wird dort sauber beschnitten (statt seitlich, wie es frueher mit "cover" war) bzw. scheint die weichgezeichnete Ebene durch, wenn das Bild kuerzer als der Kasten ist. Co-Authored-By: Claude Opus 5 --- assets/css/main.css | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index 0962697..52a724d 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -746,13 +746,14 @@ footer.site-footer { content: ""; position: absolute; inset: 0; - /* Zwei Ebenen: das scharfe Artwork komplett sichtbar (contain — nichts - abgeschnitten, oben/unten/links/rechts alles da), darunter dieselbe - Szene verwaschen als Cover, die die Ränder füllt statt sie leer zu - lassen. Kein Zoom/Kenburns mehr — der hätte immer einen Teil des + /* Zwei Ebenen: das scharfe Artwork füllt die volle Breite randlos + (100% auto — Breite passt exakt, Höhe skaliert proportional mit, + kein seitliches Abschneiden mehr); darunter dieselbe Szene verwaschen + als Cover, die oben/unten auffüllt falls das Bild dort nicht ganz + reicht. Kein Zoom/Kenburns mehr — der hätte immer einen Teil des Bildes aus dem sichtbaren Bereich geschoben. */ background-image: url("../img/universe-trio.jpg"), url("../img/universe-trio-blur.jpg"); - background-size: contain, cover; + background-size: 100% auto, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; } @@ -942,7 +943,10 @@ body.mit-hintergrund::after { inset: 0; z-index: -2; background-image: var(--page-bg); - background-size: contain; + /* Breite immer randlos voll — Höhe skaliert im selben Verhältnis mit. + Reicht das Bild oben/unten nicht bis zum Rand, scheint dort die + weichgezeichnete Ebene 1 durch statt einer leeren Fläche. */ + background-size: 100% auto; background-position: var(--page-bg-pos, center); background-repeat: no-repeat; }