Bild im Header
-
Hallo,
weiß jemand zu sagen, wie ich auf meiner Website im Theme twenty-seventeen den blauen Bereich im Header ersetzen kann durch ein Bild?
Wie ich ein Header-Bild einfüge, weiß ich.
Was mir bislang nicht daran gefällt, ist, dass der User scrollen muss, um die Menüs zu sehen.Ich suche eine Lösung, wo das Bild quasi fest verankert und nur in dem Bereich liegt, wo jetzt das Blau zu sehen ist.
Viele Grüße,
AndreasDie Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]
-
Mmh, Danke für den Hinweis.
Allerdings stelle ich mir es anders vor.In etwa, wie hier zu sehen:
Der obere Rand, dort, wo das Bild mit Vase und Blumen zu sehen ist, dorthin würde ich gerne ein eigenes Bild platzieren.
Muss ich vielleicht dafür ein anderes Theme verwenden?Ich vermute, das steht im Custom-CSS, da diese CSS-Regel inline steht und bei diesem Theme eigentlich nicht inline zu finden ist. Falls du es nicht finden solltest, versuche es mal im Custom-CSS mit
.site-branding { background-color: transparent !important; }Hallo,
die Einstellungen für das Header-Bild findest du unter Design > Customizer > Header-Medien.CSS-Regeln können unter Design > Customizer > Zusätzliches CSS eingefügt werden.
Dort solltest du die von @bscu genannte Regel ganz am Ende einfügen:.site-branding { background-color: transparent !important; }Am besten testest du das erst mal ohne
!important.Zusätzlich könnte die folgende Regel hilfreich sein, damit die Höhe des Bildes verringert wird:
@media screen and (min-width: 48em) { .twentyseventeen-front-page.has-header-image .custom-header-media{ height: 50vh; } }Viele Grüße
Hans-Gerd.site-branding {
background-color: transparent;
}-> das war schon sehr hilfreich, Danke!
Ja, die Bildhöhe bzw. den Bereich, in dem das Bild angezeigt wird, in der Höhe verringern, das wäre noch prima.
Wenn ich innerhalb von:@media screen and (min-width: 48em) { .twentyseventeen-front-page.has-header-image .custom-header-media{ height: 50vh; } }mit dem Wert 50 bei „height“ experimentiere, ihn auf 40, 20 oder 10 setze, wird zwar im Customer das Bild entsprechend verkleinert dargestellt, aber nach „Veröffentlichung“ bleibt das Bild immer in derselben Größe.
Ist es notwendig, dass das Bild selbst schon die gewünschten Maße hat?Andreas
PS:
Im Customer/ Header-Medien steht:
„Dein Theme empfiehlt eine Größe von 2000 × 1200 Pixel.“
Muss/ kann ich daran etwas ändern?PPS:
Ist es wichtig zu erwähnen, dass ich das plugin „Options for Twenty Seventeen“ installiert habe?Danke, Hans-Gerd,
.twentyseventeen-front-page.has-header-image .custom-header-media{
height: 50vh;
}-> auch dadurch wird der dargestellte Bildbereich in der Höhe nicht verringert.
Ja, dass hier CSS-Tipps nur am Rande gegeben werden, das wurde mir schon bei anderen Fragen gesagt.
Wo ich nicht weiß, woher die Zeit nehmen für all‘ das, was ich gerne könnte bzw. wüsste, hatte ich – auch, um hier die Regeln nicht zu verletzen – ursprünglich geschrieben, dass ich die Angelegenheit erst mal auf Eis legen will.
Ich weiß gegenwärtig nicht, woher die Kapazitäten herholen, um mich in CSS reinzuknieen.Gerne lese ich hier weitere Hinweise, die der entsprechende Autor bittebitte nur dann schreiben möge, wenn er es gerne tut – ansonsten würde das nach hinten losgehen und ich mich in Zukunft weniger trauen, etwas zu fragen.
Andreas
PS
Würde mein Hinweis, dass ich das plugin „Options for Twenty Seventeen“ nutze, zu anderen Tipps geführt haben?`Hallo,
… ansonsten würde das nach hinten losgehen und ich mich in Zukunft weniger trauen, etwas zu fragen.
hier Fragen zu stellen ist vollkommen in Ordnung. 😊
Allerdings sind wir nur eine Handvoll Freiwillige, die hier helfen. Daher müssen wir uns auf das „Kerngeschäft“ (Anwendungsprobleme bei WordPress) konzentrieren.Würde mein Hinweis, dass ich das plugin „Options for Twenty Seventeen“ nutze, zu anderen Tipps geführt haben?
das funktioniert bei dem Plugin nur in der kostenpflichtigen Premium-Version, die in dieser Hinsicht vom Ergebnis her auch nicht mehr macht als die genannte CSS-Regel.
doch zum gewünschten Ergebnis führt: Auf jeder Seite bis auf die erste, die Hauptseite.
Das ist das Standardverhalten bei dem Theme.
Wenn ich die genannte CSS-Regel im Customizer verwende, dann ergibt sich das folgende Bild – hier ein Screenshot dazu (bei Klick auf das Bild, wird das Bild vergrößert):
Teste das doch mal in einem privaten Fenster (Firefox) und/oder im Inkognitomodus (Chrome). Die Option findest du oben rechts bei den drei senkrechten Punkten in Chrome.
Vielleicht ist das ein Problem mit dem Cache des Browsers. Ggfs. auch mal den Browsercache löschen.Viele Grüße
Hans-GerdSchau auch mal bitte, ob du nicht ein Cache-Plugin installiert hast. Das würde ich sonst erst mal deaktivieren.
Du findest unter Werkzeuge > Websitezustand > Info einen Bericht zur Website. Warte bitte einen Moment bis die Ladeanzeige ganz oben abgeschlossen ist und kopiere dann per Button den Website-Bericht in deine Zwischenablage. Über den Button „Bericht in die Zwischenablage kopieren“ kannst du den Bericht unverändert (bitte mit den Akzentzeichen am Anfang und Ende) einfügen und anschließend hier posten. Evtl. ergeben sich dann weitere Anhaltspunkte, ob und wo das Problem liegt.
Nachtrag: Du hast wohl LiteSpeed Cache installiert und aktiviert. Bei der Entwicklung einer Website sollte auf keinen Fall ein Cache-Plugin aktiviert sein.
- Das Thema „Bild im Header“ ist für neue Antworten geschlossen.