Guten Tag, ich möchte für jede Seite ein eigenes Header-Bild haben. Wie kann ich das ermöglichen? Aktuell nutze ich als Hintergrund nen DIV-Container mit einem Hintergrundbild, damit ich noch Text draufstehen kann. Gibt es eine Methode die nicht so kompliziert ist?
Hallo
Ich sehe nicht was daran kompliziert ist. Eventuell ist dein Vorgehen komplizierter als notwendig, das können wir nicht beurteilen.
Du kannst dem div-Container jeweils eine Klasse geben und der dann ein Hintergrundbild zuweisen.
Gruss
MrMurphy
Das finde ich persönlich zu viel für ein Header. Das ganze müsste ich dann 6 Mal machen. 
[HTML].main {
background-image: url(…/…/images/header.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.main .content {
height: calc(100% - 60px);
width: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-family: ‚Bad Script‘, sans-serif;
font-size: 30px;
text-align: center;
}
.main .content p {
background-color: rgba(0, 0, 0, 0.7);
padding: 8px 15px 5px 15px;
letter-spacing: 4px;
}[/HTML]
6 mal ja, definitiv. Das Ganze, definitiv nein 
Scharf nachdenken, worin sich das gezeigte CSS für 6 Seitenheaders unterscheiden soll/wird… 
[spoiler]That’s right: background-image:url(…) 
1. Möglichkeit: in jeder Seite neben der „Haupt“-CSS-Datei eine Zweite laden (page-1-background.css, page-2-background.css, …), die Zeile 2 deines gezeigten CSS mit dem individuellen URI für enthält.
2. Möglichkeit: die Selektion/Zuordnung läuft über 6 eindeutige Bezeichner mit dem Attribut class=„…“ oder id=„…“ in oder auch im parent ab.
[/spoiler]
[SIZE=2][B]^ Klick mich [1]
[/SIZE]
PS[SIZE=2]: [/SIZE]Mit CSS-Sprites können die 6 - Requests um fünf Stück gedrosselt werden[SIZE=2]
[/SIZE]
[ul]
[li] https://de.wikipedia.org/wiki/CSS-Sprites [/li]
[li] https://www.w3schools.com/css/css_image_sprites.asp [/li][/ul]
/B ↩︎