From 5761fe1a278d6c7ebdc442ae3773d8e3cb1fcd65 Mon Sep 17 00:00:00 2001 From: Dogfather Date: Sat, 1 Aug 2026 00:31:58 +0200 Subject: [PATCH] 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 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 --- assets/css/main.css | 103 ++++++++++++++++---------------------- bewerben-creator.html | 1 + bewerben-kooperation.html | 1 + bewerben-modi.html | 1 + bewerben-scout.html | 1 + bewerben.html | 1 + casper.html | 1 + community.html | 1 + creator.html | 1 + dogfather.html | 1 + hasidog.html | 1 + manager.html | 1 + profil.html | 8 ++- stimmen.html | 1 + streamplan.html | 1 + team-modis.html | 1 + team-scouts.html | 1 + vanvan.html | 1 + werte.html | 1 + zeitreise.html | 1 + 20 files changed, 67 insertions(+), 62 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index c9a84a0..550b04d 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -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 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 , 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. + +
+
+
...
+
+ + 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) { diff --git a/bewerben-creator.html b/bewerben-creator.html index ec165c9..117b046 100644 --- a/bewerben-creator.html +++ b/bewerben-creator.html @@ -27,6 +27,7 @@
+
Manager Dogfather — Agentur

Streamer? Ich such dich als Creator.

diff --git a/bewerben-kooperation.html b/bewerben-kooperation.html index 0d55f11..aaea051 100644 --- a/bewerben-kooperation.html +++ b/bewerben-kooperation.html @@ -27,6 +27,7 @@
+
Manager Dogfather — Agentur

Kooperation anfragen

diff --git a/bewerben-modi.html b/bewerben-modi.html index bcde6ab..764195c 100644 --- a/bewerben-modi.html +++ b/bewerben-modi.html @@ -27,6 +27,7 @@
+
🩵 Team Dogi — Community

Werde Modi bei Team Dogi

diff --git a/bewerben-scout.html b/bewerben-scout.html index 1c06546..217c9cb 100644 --- a/bewerben-scout.html +++ b/bewerben-scout.html @@ -27,6 +27,7 @@
+
Manager Dogfather — Agentur

Werde Scout für Dogfather

diff --git a/bewerben.html b/bewerben.html index 4e0d23a..1ea9b2a 100644 --- a/bewerben.html +++ b/bewerben.html @@ -27,6 +27,7 @@
+
Werde Teil vom Team

Community oder Agentur — such dir deinen Weg

diff --git a/casper.html b/casper.html index ea52d1d..8fdbb6d 100644 --- a/casper.html +++ b/casper.html @@ -27,6 +27,7 @@
+
Welt 2 — HasiDog

Casper 🐾

diff --git a/community.html b/community.html index 668a695..6ac443f 100644 --- a/community.html +++ b/community.html @@ -27,6 +27,7 @@
+
Welt 2 — HasiDog

Die Community

diff --git a/creator.html b/creator.html index 2841be1..1c9e0f6 100644 --- a/creator.html +++ b/creator.html @@ -27,6 +27,7 @@
+
Manager Dogfather — Team

Creator im Team

diff --git a/dogfather.html b/dogfather.html index 6623b6b..f3ec8b8 100644 --- a/dogfather.html +++ b/dogfather.html @@ -27,6 +27,7 @@
+
Welt 1 — Dogfather

Die Person hinter Dogfather

diff --git a/hasidog.html b/hasidog.html index 2a736a7..95c4988 100644 --- a/hasidog.html +++ b/hasidog.html @@ -27,6 +27,7 @@
+
Welt 2 — HasiDog

Willkommen in der HasiDog-Welt

diff --git a/manager.html b/manager.html index a9503f4..87de0e8 100644 --- a/manager.html +++ b/manager.html @@ -27,6 +27,7 @@
+
Welt 3 — Manager Dogfather

Manager Dogfather bei Spicy Media

diff --git a/profil.html b/profil.html index 95da931..e0fccab 100644 --- a/profil.html +++ b/profil.html @@ -54,6 +54,7 @@
+
🩵 Team Dogi

Profil

@@ -127,10 +128,15 @@ document.addEventListener("DOMContentLoaded", () => { const welt = istScout || istCreator ? "spicymedia" : "dogfather"; document.documentElement.setAttribute("data-theme", welt); - // Passendes Weltmotiv im Hintergrund, wie auf den Team-Übersichtsseiten + // Passendes Weltmotiv im Hintergrund, wie auf den Team-Übersichtsseiten. + // Ambiente-Ebene (weichgezeichnet, body-weit) UND der scharfe Banner + // oben im Kopfbereich (echtes , dadurch immer komplett sichtbar + // und randlos breit — siehe main.css .hero-banner). const bgBasis = istScout || istCreator ? "bg-scouts" : "bg-dogfather"; document.body.style.setProperty("--page-bg", `url('/assets/img/${bgBasis}.jpg')`); document.body.style.setProperty("--page-bg-mobile", `url('/assets/img/${bgBasis}-mobile.jpg')`); + document.getElementById("profil-banner-img").src = `/assets/img/${bgBasis}.jpg`; + document.getElementById("profil-banner").style.display = ""; document.title = `${person.name} — DOGFATHER UNIVERSE`; // Für die Meta-Beschreibung reicht immer ein kurzer Textauszug, auch diff --git a/stimmen.html b/stimmen.html index 24ccea3..742703d 100644 --- a/stimmen.html +++ b/stimmen.html @@ -27,6 +27,7 @@
+
Welt 2 — HasiDog

Stimmen über Dogfather

diff --git a/streamplan.html b/streamplan.html index 83b7eba..4bc3793 100644 --- a/streamplan.html +++ b/streamplan.html @@ -27,6 +27,7 @@
+
Welt 1 — Dogfather

Streamplan & Livebereich

diff --git a/team-modis.html b/team-modis.html index d8758d3..3de1a7b 100644 --- a/team-modis.html +++ b/team-modis.html @@ -27,6 +27,7 @@
+
🩵 Team Dogi

Das Modi-Team

diff --git a/team-scouts.html b/team-scouts.html index 0ca8a21..50c9198 100644 --- a/team-scouts.html +++ b/team-scouts.html @@ -27,6 +27,7 @@
+
Manager Dogfather — Spicy Media

Unser Scout-Team

diff --git a/vanvan.html b/vanvan.html index ebc8885..72efb67 100644 --- a/vanvan.html +++ b/vanvan.html @@ -27,6 +27,7 @@
+
🩵 Exklusive Seite

VanVan

diff --git a/werte.html b/werte.html index fc37970..80f728b 100644 --- a/werte.html +++ b/werte.html @@ -27,6 +27,7 @@
+
Welt 3 — Manager Dogfather

Werte als Manager

diff --git a/zeitreise.html b/zeitreise.html index c128017..1310309 100644 --- a/zeitreise.html +++ b/zeitreise.html @@ -27,6 +27,7 @@
+
Welt 1 — Dogfather

Zeitreise