• 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?
 
Werbung:
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;
}
 
Werbung:
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