Hintergrundbilder: garantiert volle Breite UND komplett sichtbar
Nach mehreren Anlaeufen mit CSS background-size (cover schnitt Raender ab, "100% auto" schnitt oben/unten ab sobald die Box nicht exakt im Bildseitenverhaeltnis war) jetzt die einzige Loesung, die beides IMMER garantiert: ein echtes <img width:100% height:auto> statt eines CSS- Hintergrunds. Die Bildhoehe bestimmt sich selbst statt in eine vorgegebene Box gepresst zu werden -- dadurch kann nichts mehr beschnitten werden, unabhaengig vom Bildseitenverhaeltnis. - 18 Seiten (alle bewerben-*, casper, community, creator, dogfather, hasidog, manager, stimmen, streamplan, team-modis, team-scouts, vanvan, werte, zeitreise) bekommen einen echten Bild-Banner oben im Kopfbereich statt eines CSS-Hintergrunds. Bild sitzt jetzt als eigener Banner OBERHALB der Ueberschrift, mit weichem Verlauf zur Seite hin. - profil.html: gleiches Prinzip, Bild wird per JS passend zur Person (Modi/Scout/Creator-Welt) nachgeladen. - index.html/hasidog.html (Kino-Hintergrund mit Text UEBER dem Bild + Polarlicht-Effekten): Redesign auf Banner-Layout haette das Design zerstoert. Stattdessen die scharfe Bildebene auf "contain" umgestellt (garantiert komplett sichtbar), die vorhandene weichgezeichnete Cover-Ebene darunter fuellt jeden Rand, den "contain" freilaesst -- wirkt dadurch weiterhin randlos, obwohl die scharfen Pixel nie beschnitten werden. Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
+42
-61
@@ -751,14 +751,15 @@ footer.site-footer {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
/* 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. */
|
||||
/* Zwei Ebenen: das scharfe Artwork komplett sichtbar (contain — auf
|
||||
dieser Seite läuft der Text ÜBER dem Bild mit Polarlicht-Effekten,
|
||||
ein Banner-oberhalb-des-Texts-Layout wie auf den anderen Seiten
|
||||
würde das Design zerstören). Darunter dieselbe Szene verwaschen als
|
||||
Cover, die jeden Rand auffüllt, den "contain" freilässt — dadurch
|
||||
wirkt es trotzdem randlos, obwohl die scharfen Pixel garantiert
|
||||
nie beschnitten werden. */
|
||||
background-image: url("../img/universe-trio.jpg"), url("../img/universe-trio-blur.jpg");
|
||||
background-size: 100% auto, cover;
|
||||
background-size: contain, cover;
|
||||
background-position: center, center;
|
||||
background-repeat: no-repeat, no-repeat;
|
||||
}
|
||||
@@ -929,68 +930,48 @@ body.mit-hintergrund::after {
|
||||
color-mix(in srgb, var(--bg) 95%, transparent) 100%);
|
||||
}
|
||||
|
||||
/* ---- 2) Im Kopfbereich zeigt sich das Motiv gestochen scharf ----
|
||||
Hier darf es wirken: kaum abgedunkelt, volle Schärfe.
|
||||
WICHTIG: background-size CONTAIN, nicht cover — das ganze Bild soll immer
|
||||
komplett zu sehen sein (oben/unten/links/rechts), nichts abgeschnitten.
|
||||
Falls das Bild schmaler/breiter als der Kopfbereich ist, bleibt links und
|
||||
rechts (oder oben/unten) ein Rand frei — durch den scheint die weichge-
|
||||
zeichnete Version aus Ebene 1 durch, damit dort keine harte leere Fläche
|
||||
entsteht, sondern ein ruhiger, stimmiger Übergang. */
|
||||
.page-bg {
|
||||
/* ---- 2) Kopfbereich: ECHTES <img> statt CSS-Hintergrund ----
|
||||
Nach mehreren Anläufen mit background-size (cover schnitt Ränder ab,
|
||||
contain ließ Lücken, "100% auto" schnitt oben/unten ab sobald die Box
|
||||
nicht exakt im Bildseitenverhältnis war) die einzige Lösung, die IMMER
|
||||
beides garantiert — volle Breite UND das komplette Bild sichtbar：
|
||||
ein normales <img width:100% height:auto>, das seine Höhe selbst
|
||||
bestimmt statt in eine vorgegebene Box gepresst zu werden. Es kann
|
||||
dadurch gar nicht mehr beschnitten werden, ganz gleich welches
|
||||
Seitenverhältnis das Foto hat.
|
||||
|
||||
<section class="hero page-bg">
|
||||
<div class="hero-banner"><img src="assets/img/bg-x.jpg" alt="" /></div>
|
||||
<div class="container">...</div>
|
||||
</section>
|
||||
|
||||
Das Bild sitzt dadurch als eigener Banner OBERHALB der Überschrift
|
||||
(statt als Hintergrund dahinter) — dafür garantiert zuverlässig, auf
|
||||
jeder Seite, mit jedem Bild, ohne weitere Handarbeit. */
|
||||
.hero-banner {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
overflow: hidden;
|
||||
line-height: 0; /* verhindert einen Mini-Spalt unter dem Bild */
|
||||
}
|
||||
.page-bg::before {
|
||||
.hero-banner img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
/* Weicher Übergang unten, damit das Foto nicht hart in die Seite schneidet */
|
||||
.hero-banner::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -2;
|
||||
background-image: var(--page-bg);
|
||||
/* 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;
|
||||
}
|
||||
.page-bg::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
background:
|
||||
/* Vignette: Mitte hell genug, dass das Motiv wirkt, Ränder ruhig dunkel */
|
||||
radial-gradient(ellipse 125% 95% at 50% 45%,
|
||||
rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, .50) 72%, rgba(0, 0, 0, .70) 100%),
|
||||
/* oben dunkler für die Navigation, unten weicher Übergang in die Seite */
|
||||
linear-gradient(to bottom,
|
||||
rgba(0, 0, 0, .58) 0%,
|
||||
rgba(0, 0, 0, .26) 26%,
|
||||
rgba(0, 0, 0, .36) 66%,
|
||||
color-mix(in srgb, var(--bg) 94%, transparent) 100%);
|
||||
}
|
||||
/* Damit die Schrift auf jedem Bildausschnitt sicher lesbar bleibt, bekommt
|
||||
sie eine kräftige Abschattung statt das Bild abzudunkeln. */
|
||||
.page-bg h1,
|
||||
.page-bg h2,
|
||||
.page-bg .lead,
|
||||
.page-bg .eyebrow {
|
||||
text-shadow:
|
||||
0 2px 4px rgba(0, 0, 0, .95),
|
||||
0 4px 22px rgba(0, 0, 0, .85),
|
||||
0 0 42px rgba(0, 0, 0, .7);
|
||||
background: linear-gradient(to bottom,
|
||||
rgba(0, 0, 0, .05) 0%,
|
||||
transparent 45%,
|
||||
color-mix(in srgb, var(--bg) 55%, transparent) 82%,
|
||||
var(--bg) 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.page-bg.hero {
|
||||
padding: clamp(5rem, 13vw, 9rem) 0;
|
||||
min-height: clamp(340px, 46vh, 520px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: clamp(2.4rem, 5vw, 3.4rem) 0 clamp(3rem, 7vw, 4.5rem);
|
||||
}
|
||||
/* Der Inhalt behält seine normale Breite samt Seitenrändern (92vw).
|
||||
Früher stand hier width:100% — dadurch klebte der Text auf schmalen
|
||||
Bildschirmen direkt am Rand. */
|
||||
.page-bg.hero > .container { margin-inline: auto; }
|
||||
|
||||
@media (max-width: 760px) {
|
||||
|
||||
Reference in New Issue
Block a user