Headerbild einfach ändern - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Scan QR or Download Android App
Direkt zum Seiteninhalt

Headerbild einfach ä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.
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.

» nach oben «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt