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 <[email protected]>
This commit is contained in:
+10
-6
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user