• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Header-Bild je Seite ändern

H

htmlberliner

Guest
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;
}
 
htmlberliner schrieb:
Das finde ich persönlich zu viel für ein Header. Das ganze müsste ich dann 6 Mal machen. :/
Zum Vergrößern anklicken....
6 mal ja, definitiv. Das Ganze, definitiv nein :cool:

Scharf nachdenken, worin sich das gezeigte CSS für 6 Seitenheaders unterscheiden soll/wird... ;)

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 <header></header> enthält.

2. Möglichkeit: die Selektion/Zuordnung läuft über 6 eindeutige Bezeichner mit dem Attribut class="..." oder id="..." in <header> oder auch im parent <body> ab.
^ Klick mich ^

PS: Mit CSS-Sprites können die 6 <img>- Requests um fünf Stück gedrosselt werden :cool:
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben