Hintergrund-Gradient-Overlay auf der Seite erstellen und den Diskussionsbereich weiß gestalten

Unterstützung
1

Ich habe ein subtiles .svg-Hintergrundmuster (das sich wiederholt) in mein Theme-CSS mit folgendem Code hinzugefügt:

body {
background:url(https://forums.pickleballist.com/uploads/default/original/1X/b7df60bb8a3fd1584f393dee365865ca83e4906e.svg) center top;
background-size: 300px auto;
}

Der Standardbereich .wrap in einer neuen Discourse-Installation hat max-width: 1110px;. Aktuell ist mein Hintergrund im mittleren Bereich der Seite (dem Hauptinhaltsbereich) etwas ablenkend für den Konversationstext.

Ich möchte, dass der zentrale Bereich main-outlet, in dem Texte und Diskussionen stattfinden, in der Mitte zu 0 % deckend ist und nur einen weißen Hintergrund zeigt. Anschließend soll ein Verlauf angelegt werden, der die Deckkraft meines Hintergrunds schrittweise auf 100 % erhöht, sodass der Hintergrund an allen Rändern sichtbar wird.

So sieht mein Hintergrund derzeit aus – bei 100 % Deckkraft auf der gesamten Seite…

image
image1655×1713 777 KB

Das möchte ich erreichen…
Ich möchte, dass der allgemeine Bereich (muss nicht exakt sein), der in Rot umrandet ist, meinen Hintergrund mit 0 % Deckkraft hat, wodurch der standardmäßige, vollständig weiße Hintergrund erhalten bleibt. (Ich weiß es nicht genau, aber dafür könnte eine bilineare horizontale Verlaufsoverlay auf meinem Hintergrund nötig sein, der von #FFFFFF (weiß) in der Mitte zu transparent an den Rändern verläuft.)

SAMPLE GRADIENT
SAMPLE GRADIENT1598×2010 1.35 MB

Hier ein Beispiel, wie die Seite aussehen soll…

Monosnap 2019-12-13 10-20-04
Monosnap 2019-12-13 10-20-041004×1324 258 KB

Das kann ich zwar mit einem Hintergrundbild, das kein SVG ist, umsetzen, aber es war sehr körnig. Ich wollte hochwertige Bilder als Hintergrund verwenden, daher nutze ich aktuell das SVG.

Wenn jemand eine Idee hat, wie ich diese Anpassungen vornehmen könnte, würde ich mich sehr über eure Gedanken freuen!

2

Vielleicht können @Johani oder @awesomerobot hier beraten?

3

Richtig, ein Farbverlauf-Overlay ist wahrscheinlich der beste Ansatz… Du kannst zwei Hintergründe gleichzeitig so definieren:

body {
 background: radial-gradient(circle at center, rgba(255,255,255,1) 35%, rgba(255,255,255,0)) fixed, url(https://forums.pickleballist.com/uploads/default/original/1X/b7df60bb8a3fd1584f393dee365865ca83e4906e.svg) center top / 300px auto  ;
 background-attachment: fixed;
}

Oder wenn du diesen Farbverlauf nur auf Themenseiten und nicht auf anderen Seiten (wie Profilen, Themenlisten usw.) haben möchtest… könntest du das Muster auf body setzen und dann den Farbverlaufshintergrund darüber in .archetype-regular #main-outlet { }.

4

Kris! Das hat brillant funktioniert (siehe Bild unten)! Vielen Dank für die schnelle Rückmeldung!!

Eine weitere Frage… aus Sicht der Best Practices und Effizienz ist das der beste Weg, um das zu erreichen, was ich möchte? Ist dies die “leichtgewichtigste” und effizienteste Lösung? Oder wäre ein statisches Bild, das sich nicht wiederholt, oder eine andere Lösung ein besserer Weg, um das zu tun, was ich versuche, während weniger Ressourcen/Bandbreite usw. verbraucht werden?

image
image1478×1364 486 KB

5

Meine Vermutung ist, dass ein sich wiederholendes Muster mit einem CSS-Gradienten der beste Ansatz wäre… Ein statisches Bild wäre wahrscheinlich deutlich größer, und das Herunterladen einer größeren Datei hat wahrscheinlich einen größeren Einfluss als alles andere (es würde mit Sicherheit mehr Bandbreite verbrauchen als das CSS, das den Gradienten erstellt).