Headerbild ändern - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App

Direkt zum Seiteninhalt

Headerbild ändern

Tutorials
Anderes Bild im Header verwenden
Webseiten haben in der Regel in der Grundeinstellung für jede Seite das gleiche Bild für den Headerhintergrund.
Natürlich ist es auch möglich, für jede Seite ein anderes Bild als Hintergrund zu wählen. Dazu einfach ein Hintergrundbild wählen und die Größe dem Original-Hintergrundbild am besten mit einem Bildbearbeitungsprogramm anpassen. Dann das Bild auf den Webserver in einem Verzeichnis Deiner Wahl ablegen und einen entsprechenden Namen geben (hier: images/header.jpg). Nun noch den CSS-Code in den HEAD-Bereich <head> ..... </head> einfügen, Pfade anpassen und die Daten auf den Server laden.
Natürlich kann man auch kleinere Elemente oder Farbschnipsel einfügen. Dazu muss im  Code nur der Eintrag "background-repeat: no-repeat;" entsprechend angepasst werden.
no-repeat
Keine Wiederholung. Das Bild wird einmal dargestellt.
repeat
Horizontal und vertikal wiederholen.
repeat-x
Nur horizontal wiederholen.
repeat-y
Nur vertikal wiederholen.
Download Button
Natürlich gibt es diverse mehr Möglichkeiten mit CSS den Bereich zu gestalten, worauf wir hier nicht näher eingehen wollen.
Code für den <HEAD> Bereich
<style>
#imHeader {
height: 260px; background-color: #B4DA9F;
background-image: url('images/header.jpg') !important;
background-position: top left;
background-repeat: no-repeat;
}    
</style>
Die !important Regel verhindert, dass die Formatierungen der allgemeinen Stylesheet-Datei, die alle Grundformatierungen enthält, zum tragen kommt. Das heißt die Regel im allgemeinem Stylsheet wird durch die Regel mit !important ersetzt.
Das background-color: #B4DA9F; legt die Hintergrundfarbe fest, falls das Bild versehentlich mal gelöscht werden sollte. Hier kann auch transparent gewählt werden.

Noch weitere Möglichkeiten den Style über den CSS-Bereich zu verändern zeigen wir hier.
Feedbacks zu ""
Kein Kommentar
Vielen Dank für Dein Feedback.
Logo Host Europe
Button Spenden

© 2009 - 2020





Besucher Statistik
» 1 Online
» 10 Heute
» 105 Gestern
» 644 Woche
» 1008 Monat
» 42222 Jahr
» 266428 Gesamt
Record: 1144 (01.02.2020)
Gesamt Downloads:
Hosting by
Zurück zum Seiteninhalt