Guck mal hier:
ACP -> Konfiguration -> Globale Einstellung Stile -> Hauptmenü beim Scrollen am Bildschirmrand fixieren
Schreibst du noch wenn du Hilfe bei den Bildern brauchst?
Wo genau meinst du? Oder hast du das Text-Logo aktiv?
Das Logo ist definitiv transparent.
Ich würde meine linke Hand dafür ins Feuer legen dass das Logo nicht 100% transparent ist 🫣 🫣🫣🫣🫣🫣🫣 Hast du eventuell einen großen Schatten drin? Dann erzeugt der eventuell die Füllung.
Ich habe die Hintergründe etwas verteilt damit es nicht überall gleich aussieht. Du kannst entweder alles auf 0 setzen oder du passt den Wert an der nicht so schön aussieht. Du kannst das ins Allgemeine CSS packen:
.styleMetro {
.wbbBoardNodeContainerList > .wbbBoardNodeContainer:nth-child(5n+1) > .wbbBoardNodeContainer__header {
background-position: center -50px;
}
.wbbBoardNodeContainerList > .wbbBoardNodeContainer:nth-child(5n+2) > .wbbBoardNodeContainer__header {
background-position: center -250px;
}
.wbbBoardNodeContainerList > .wbbBoardNodeContainer:nth-child(5n+3) > .wbbBoardNodeContainer__header {
background-position: center -450px;
}
.wbbBoardNodeContainerList > .wbbBoardNodeContainer:nth-child(5n+4) > .wbbBoardNodeContainer__header {
background-position: center -650px;
}
.wbbBoardNodeContainerList > .wbbBoardNodeContainer:nth-child(5n+5) > .wbbBoardNodeContainer__header {
background-position: center -850px;
}
}Guten Morgen,
ich hätte hierzu noch zwei Fragen:
Aktuell verwenden wir im Hintergrund lediglich eine einfarbige Fläche. Diese möchten wir nun durch ein richtiges Bild ersetzen.
Dabei ist uns aufgefallen, dass sich die header.webp-Datei nicht korrekt an die vorhandene Höhe und Breite anpasst. Wenn wir ein Bild mit den Abmessungen 1900 × 1043 px (Scaled 88 %) einfügen, wird es verzerrt und sieht dadurch nicht mehr ansprechend aus.
Könnt ihr uns mitteilen, welche Bildgröße bzw. Auflösung das Bild idealerweise haben sollte, damit es ohne Skalierung oder Verzerrung dargestellt wird?
Außerdem hätten wir noch eine zweite Frage: Wäre es möglich, den grauen Bereich unterhalb des Menüs (den dunklen und den hellgrauen Balken) etwas transparent darzustellen, sodass das Hintergrundbild dort leicht durchscheint? Oder würdet ihr hierfür eine andere, bessere Lösung empfehlen?
Vielen Dank im Voraus für eure Unterstützung!
Freundliche Grüße
Die Skalierung kann man so ausschalten:
@include screen-lg {
#pageHeaderContainer {
background-position: center top;
background-size: initial;
}
}Als Bild würde sich dann sowas wie 2600x230px anbieten.
Der Streifen ist nicht Teil des Headers. Man könnte das eventuell so lösen das man den unteren Bereich einfach in den oberen Bereich rein zieht:
@include screen-lg {
#pageHeaderContainer {
padding-bottom: 50px;
}
.pageNavigation {
margin-top: -50px;
z-index: 100;
background-color: rgba(0, 0, 0, 0);
}
.pageNavigation > .layoutBoundary {
background-color: rgba(var(--wcfNavigationBackground-rgb) / 0.7);
backdrop-filter: var(--bodyBlur);
-webkit-backdrop-filter: var(--bodyBlur);
}
}Da müsste dann mal etwas ausprobieren was gut aussieht.
