Title: 2023: Elemente vor Hintergrundbild immer vertikal mittig? Last modified: 10. Januar 2023 --- # 2023: Elemente vor Hintergrundbild immer vertikal mittig? * Gelöst [wpzugang](https://de.wordpress.org/support/users/wpzugang/) * (@wpzugang) * [vor 3 Jahren, 9 Monaten](https://de.wordpress.org/support/topic/2023-elemente-vor-hintergrundbild-immer-vertikal-mittig/) * Hallo zusammen, * bin gerade dabei, zwei neue Websites mit dem Theme Twenty-Twenty-Three zu erstellen und komme an einem Punkt nicht weiter. * Ich möchte meine Navigation sowie einen Text vor ein Bild jeweils oben bündig setzen, also abschließend mit dem oberen Rand. Leider finde ich nicht heraus, wie ich die Elemente oben bündig anordnen kann. Sie werden immer mittig angeordnet, sobald irgendein Elemet im Hintergrund sitzt. * Andere Themes haben einen separaten Editor für das Positieren von Elementen aber ich möchte es schlank halten, mit möglichst wenig Plugins und gerne dieses Theme weiterverwenden.. * Gibt es dafür eine Lösung, eventuell über Maring-top 0 oder so? [https://www.aeropano.net/wordpress-img/block-mittig2.JPG](https://www.aeropano.net/wordpress-img/block-mittig2.JPG) [https://www.aeropano.net/wordpress-img/block-mittig1.JPG](https://www.aeropano.net/wordpress-img/block-mittig1.JPG)` Ansicht von 13 Antworten – 1 bis 13 (von insgesamt 13) * Moderator [Hans-Gerd Gerhards](https://de.wordpress.org/support/users/hage/) * (@hage) * [vor 3 Jahren, 8 Monaten](https://de.wordpress.org/support/topic/2023-elemente-vor-hintergrundbild-immer-vertikal-mittig/#post-139729) * Hallo, entscheidend ist dabei der Abstandhalter unter dem Navigations-Block im Cover-Block. * nachfolgend ein kleines Video zur Veranschaulichung (bei Klick auf das Video, wird das Video vergrößert dargestellt): * [⌊Cover mit Navigation oben bei TT3⌉⌊Cover mit Navigation oben bei TT3⌉[ * Viele Grüße Hans-Gerd * Themenersteller [wpzugang](https://de.wordpress.org/support/users/wpzugang/) * (@wpzugang) * [vor 3 Jahren, 8 Monaten](https://de.wordpress.org/support/topic/2023-elemente-vor-hintergrundbild-immer-vertikal-mittig/#post-139776) * Danke für die aufürhliche Antwort mit dem GIF. * Damit kann ich schon mal mein Menü nach oben schieben. Nur ist mir noch nicht ganz klar, wie ich die Höhe korrekt setze. Das Hintergrundbild ist auf bildschirmfüllend eingestellt. So sollen auch die Elemente davor sein, da unter dem Menü bereits die zweite Seite als onepager beginnt wie bei deiner anderen (übrigens sehr guten) Anleitung geschrieben: [https://haurand.com/onepager-bei-einem-block-theme-am-beispiel-twenty-twenty-two/](https://haurand.com/onepager-bei-einem-block-theme-am-beispiel-twenty-twenty-two/) Als Unterschied hab ich den Anker auf die gesamte Gruppe/Seite statt auf einen Abstandshalter gesetzt (werde mal probieren, ob das genauso gut geht). * Also Wenn ich den Abstandshalter z.B. auf 70% Höhe setzen möchte, müsste ich die Gruppe, in der die Navigation sitzt, auf 30% Höhe setzen. Nur kann ich weder bei der Gruppe, noch bei der Zeile innerhalb der Gruppe die Einstellung „Höhe“ und „%“ finden. Auch beim Abstandshalter lässt sich „%“ nicht auswählen. Gibt es da eine Möglichkeit? - Diese Antwort wurde vor 3 Jahren, 8 Monaten von [wpzugang](https://de.wordpress.org/support/users/wpzugang/) geändert. - Diese Antwort wurde vor 3 Jahren, 8 Monaten von [wpzugang](https://de.wordpress.org/support/users/wpzugang/) geändert. * Moderator [Hans-Gerd Gerhards](https://de.wordpress.org/support/users/hage/) * (@hage) * [vor 3 Jahren, 8 Monaten](https://de.wordpress.org/support/topic/2023-elemente-vor-hintergrundbild-immer-vertikal-mittig/#post-139794) * Hallo, * > Als Unterschied hab ich den Anker auf die gesamte Gruppe/Seite statt auf einen > Abstandshalter gesetzt (werde mal probieren, ob das genauso gut geht). * Warum wolltest du das so setzen? Ohne Link zur Website von dir, wo man sich das ansehen kann, wird das vermutlich kaum nachvollziehbar sein, was du vorhast. 🤷‍♂️ * Freut mich übrigens, dass mein Beitrag, den du oben verlinkt hast, hilfreich für dich ist. 😉 * Viele Grüße Hans-Gerd * Themenersteller [wpzugang](https://de.wordpress.org/support/users/wpzugang/) * (@wpzugang) * [vor 3 Jahren, 8 Monaten](https://de.wordpress.org/support/topic/2023-elemente-vor-hintergrundbild-immer-vertikal-mittig/#post-139796) * > Warum wolltest du das so setzen? * Weil ich dachte, dass ich mir so den Abstandshalter spare, da jede Seite ja bei mir eh in eine Gruppe soll. Aber das kann ich dann ja testen und wenn es nicht wie gewünscht funktioniert, habe ich ja noch deine Anleitung mit dem Abstandshalter als Anker. * Habe herausgefunden, woran es lag. Sowohl das Plugin „Background AWB“ als auch der Cover-Block habe eine Einstellung für die Position des Inhalts. So geht es auch ohne Abstandshalter: [https://www.aeropano.net/wordpress-img/background_vertical_top.JPG](https://www.aeropano.net/wordpress-img/background_vertical_top.JPG) [https://www.aeropano.net/wordpress-img/cover_top.JPG](https://www.aeropano.net/wordpress-img/cover_top.JPG) * Trotzdem hätte ich für die Abstandshalter gerne noch eine Prozentangabe zur Auswahl. [https://www.aeropano.net/wordpress-img/hight_spacer.JPG](https://www.aeropano.net/wordpress-img/hight_spacer.JPG) * Die Seite ist noch nicht online aber ich denke, die Screenshots reichen. - Diese Antwort wurde vor 3 Jahren, 8 Monaten von [wpzugang](https://de.wordpress.org/support/users/wpzugang/) geändert. * Moderator [Hans-Gerd Gerhards](https://de.wordpress.org/support/users/hage/) * (@hage) * [vor 3 Jahren, 8 Monaten](https://de.wordpress.org/support/topic/2023-elemente-vor-hintergrundbild-immer-vertikal-mittig/#post-139806) * Hallo, wenn du den Navigations-Block oben im Cover-Block positionieren willst, dann wirst du das m. E. nicht ohne einen Abstandhalter hinbekommen. Dafür würde ich persönlich auch kein zusätzliches Plugin verwenden. * Mir ist allerdings immer noch nicht klar, warum du unbedingt darauf bestehst, die Höhe des Abstandhalters über eine Prozentangabe anzugeben. * Laut theme.json sind zwar die units px, em, rem, %, vw, und vh möglich, aber ich vermute, dass das bei dem Abstandhalter nicht unterstützt wird, siehe hier( ab Zeile 99 in der theme.json): * ``` "units": [ "%", "px", "em", "rem", "vh", "vw" ] ``` * Aber wie gesagt, welchen Vorteil du bei Verwendung von % siehst, ist mir unklar. Siehe auch z. B. [hier](https://www.mediaevent.de/schriftgroessen-immer-ein-griff-ins-wespennest/). * Viele Grüße Hans-Gerd * Themenersteller [wpzugang](https://de.wordpress.org/support/users/wpzugang/) * (@wpzugang) * [vor 3 Jahren, 8 Monaten](https://de.wordpress.org/support/topic/2023-elemente-vor-hintergrundbild-immer-vertikal-mittig/#post-139810) * Wenn es über vh oder vw geht, muss es natürlich nicht % sein. Mit meinem begrenzten HTML und CSS-Wissen schien mir % am logischsten. Soll halt nur so bildschirmfüllend wie der Hintergrund sein und oben und unten bündig abschließen. Weiß nicht, welche Einheit der Hintergrund-Block für die bildschirmfüllende Anordnung verwendet. * > wenn du den Navigations-Block oben im Cover-Block positionieren willst, dann > wirst du das m. E. nicht ohne einen Abstandhalter hinbekommen. * So wie bei meinem Screenshot geht es doch aber nun. Habe hier keinen Abstandshalter mehr drin: [https://www.aeropano.net/wordpress-img/background_vertical_top.JPG](https://www.aeropano.net/wordpress-img/background_vertical_top.JPG) [https://www.aeropano.net/wordpress-img/cover_top.JPG](https://www.aeropano.net/wordpress-img/cover_top.JPG) * Das Plugin „Background AWB“ habe ich nur wegen der Möglichkeit genommen, im Hintergrund Videos abspielen zu können. Sowohl selbst-gehostete als auch Links aus Vimeo oder Youtube. Wenn es dazu eine pluginfreie-Alternative gibt, bin ich natürlich auch dafür offen. * Moderator [Hans-Gerd Gerhards](https://de.wordpress.org/support/users/hage/) * (@hage) * [vor 3 Jahren, 8 Monaten](https://de.wordpress.org/support/topic/2023-elemente-vor-hintergrundbild-immer-vertikal-mittig/#post-139811) * Hallo, * > So wie bei meinem Screenshot geht es doch aber nun. Habe hier keinen Abstandshalter > mehr drin * stimmt, aber mir persönlich gefällt die Lösung über den Abstandshalter besser– ist aber Geschmacksache. * Dann ist doch offenbar das grundsätzliche Problem gelöst. Bezüglich Einbindung von Videos über das genannte Plugin werden wir dir hier mangels URL wohl nicht helfen können. Dazu kannst du ja gerne einen neuen Thread eröffnen, wenn die Website online ist, damit eine bessere Vorstellung davon hat, was du vorhast. * Kannst du das Thema dann bitte als gelöst markieren, wenn das Problem damit für dich behoben ist: [⌊Gelöst⌉](https://i.imgur.com/NKjTGAt.png) Die Option findest du rechts in der Sidebar. Danke. * Viele Grüße Hans-Gerd * Themenersteller [wpzugang](https://de.wordpress.org/support/users/wpzugang/) * (@wpzugang) * [vor 3 Jahren, 8 Monaten](https://de.wordpress.org/support/topic/2023-elemente-vor-hintergrundbild-immer-vertikal-mittig/#post-139813) * Jap grundsätzlich ist das Problem gelöst 🙂 * Mich würde aber trotzdem noch interessieren, wie du die Höhe der Navigationsbar und des Abstandshalters einstellst, damit beides in der Höhe immer korrekt bildschirmfüllend dargestellt wird. In deinem Gif hattest du ja nur eine Pixelhöhe angegeben, die nicht responsive ist. * Also Hintergrundbild – Höhe bildschirmfüllend davor: -Navigationsbar mit Höhe???- Abstandshalter mit Höhe ??? * Themenersteller [wpzugang](https://de.wordpress.org/support/users/wpzugang/) * (@wpzugang) * [vor 3 Jahren, 8 Monaten](https://de.wordpress.org/support/topic/2023-elemente-vor-hintergrundbild-immer-vertikal-mittig/#post-139820) * Edit (oh kann gar nicht mehr editieren) Problem ist doch noch nicht gelöst. Die Navigation ist immer noch nicht ganz oben. * Habe ich einen großen weißen Bereich zu Beginn der Seite. Habe im Firefox mal geschaut, welche Regel das macht und es ist folgender Befehl gesetzt `--wp-- style--root--padding-top: var(--wp--preset--spacing--40);` Sobald ich den im Firefox Inspektor deaktivere, verschwindet der weiße Bereich oben in der Kopfzeile. Nur wie kriege ich das in WordPress in CSS weg? [https://www.aeropano.net/wordpress-img/padding-top.JPG](https://www.aeropano.net/wordpress-img/padding-top.JPG) * Noch ein kleiner Zusatz zu deiner Anleitung, falls irgendjemand das selbe Problem hat, denn mich hat es jetzt einige Zeit gekostet, das herauszufinden. [https://haurand.com/navigation-mit-zeile-am-oberen-rand-in-wordpress-full-site-editing/](https://haurand.com/navigation-mit-zeile-am-oberen-rand-in-wordpress-full-site-editing/) Volle Fensterbreite mittels Gruppenblock funktioniert nur, wenn Inhaltsbreite aktiviert und Außenabstand 0 eingestellt wird: [https://www.aeropano.net/wordpress-img/Gruppenblock_volle_Breite.jpg](https://www.aeropano.net/wordpress-img/Gruppenblock_volle_Breite.jpg) * Moderator [Hans-Gerd Gerhards](https://de.wordpress.org/support/users/hage/) * (@hage) * [vor 3 Jahren, 8 Monaten](https://de.wordpress.org/support/topic/2023-elemente-vor-hintergrundbild-immer-vertikal-mittig/#post-139821) * Hallo, * > Mich würde aber trotzdem noch interessieren, wie du die Höhe der Navigationsbar > und des Abstandshalters einstellst, * Die Höhe des Abstandshalters habe ich auf 600px eingestellt. Das ist durchaus responsive. Testweise habe ich das gerade auch mal auf 42rem eingestellt. Auch da kein Problem. * Den Zeilen-Block mit der Navigation habe ich lediglich mit einem Innenabstand von 1 Einheit eingestellt. * Hier ein Screenshot dazu (bei Klick auf das Bild, wird das Bild vergrößert): [⌊Einstellung Zeilen-Block⌉](https://i.imgur.com/wIsTkqj.jpg) * Ich muss allerdings dazu erwähnen, dass ich in dem Fall Gutenberg Version 14.9 aktiviert habe. Das Plugin Gutenberg enthält bereits einige Features von WordPress 6.2 und sollte auf Produktivseiten nicht aktiviert werden. * Aufgrund deiner Frage habe ich gestern einen [Beitrag erstellt](https://haurand.com/navigation-im-cover-block-bei-twenty-twenty-three/). * Da findest du auch die Lösung für den weißen Rand, wobei ich das auf Basis der im März erscheinenden Version 6.2 von WordPress darstelle. Ich gehe aber auch in dem Beitrag auf eine Lösung in der aktuellen Version von WordPress ein. Eine Darstellung hier würde den Rahmen sprengen. * Danke für den Hinweis bezüglich des verlinkten Beitrags. Das werde ich noch ergänzen. * Viele Grüße Hans-Gerd - Diese Antwort wurde vor 3 Jahren, 8 Monaten von [Hans-Gerd Gerhards](https://de.wordpress.org/support/users/hage/) geändert. * Moderator [Hans-Gerd Gerhards](https://de.wordpress.org/support/users/hage/) * (@hage) * [vor 3 Jahren, 8 Monaten](https://de.wordpress.org/support/topic/2023-elemente-vor-hintergrundbild-immer-vertikal-mittig/#post-139823) * Nachtrag: Die Höhe des Abstandshalters ist natürlich von der Höhe des Cover- Blocks abhängig. Wenn ich z. B. die Höhe des Cover-Blocks mit 20rem einstelle, dann habe ich im Beispiel eine Höhe des Abstandhalter-Blocks mit 15rem eingestellt. * Hier ein Screenshot dazu (bei Klick auf das Bild, wird das Bild vergrößert): * [⌊Einstellung Cover-Block und Abstandhalter⌉⌊Einstellung Cover-Block und Abstandhalter⌉[ * Themenersteller [wpzugang](https://de.wordpress.org/support/users/wpzugang/) * (@wpzugang) * [vor 3 Jahren, 8 Monaten](https://de.wordpress.org/support/topic/2023-elemente-vor-hintergrundbild-immer-vertikal-mittig/#post-139845) * Super Support, vielen Dank! Weißer Bereich ist jetzt auch weg. * Ja der CSS Customizer ist in WordPress 6.1.1 leider nur noch direkt über [website]/ wp-admin/customize.php erreichbar. Das muss man auch mal wissen, sonst sucht man da ja ewig nach (so wie ich). - Diese Antwort wurde vor 3 Jahren, 8 Monaten von [wpzugang](https://de.wordpress.org/support/users/wpzugang/) geändert. * Moderator [Hans-Gerd Gerhards](https://de.wordpress.org/support/users/hage/) * (@hage) * [vor 3 Jahren, 8 Monaten](https://de.wordpress.org/support/topic/2023-elemente-vor-hintergrundbild-immer-vertikal-mittig/#post-139848) * super – freut uns. Danke für die Rückmeldung und “Gelöst”-Markieren. 👍 Ansicht von 13 Antworten – 1 bis 13 (von insgesamt 13) Das Thema „2023: Elemente vor Hintergrundbild immer vertikal mittig?“ ist für neue Antworten geschlossen. ## Schlagwörter * [hintergrund](https://de.wordpress.org/support/topic-tag/hintergrund/) * [mittig](https://de.wordpress.org/support/topic-tag/mittig/) * [vertikal](https://de.wordpress.org/support/topic-tag/vertikal/) * In: [Themes](https://de.wordpress.org/support/forum/themes/) * 13 Antworten * 2 Teilnehmer * Letzte Antwort von: [Hans-Gerd Gerhards](https://de.wordpress.org/support/users/hage/) * Letzte Aktivität: [vor 3 Jahren, 8 Monaten](https://de.wordpress.org/support/topic/2023-elemente-vor-hintergrundbild-immer-vertikal-mittig/#post-139848) * Status: gelöst ## Themen ### Beliebteste Themen ### Unbeantwortete Themen ### Nicht-Support-Themen ### Gelöste Themen ### Ungelöste Themen ### Alle Themen