Monatsrückblick Januar/Februar 2026 ist online!

[Ein ehemaliger Benutzer]

Hallo,

ich hab in einer VIS einen CSS-Hintergrund (Gradient Black 5) und habe das Problem, dass der Hintergrund ausschließlich in dem Bereich gezeichnet wird, der beim Starten der Visualisierung sichtbar ist. Scrolle ich zB nach unten, ist der Hintergrund an der Stelle weiß. Kann ich dieses Verhalten irgendwie beeinflussen?
An den Werten hab ich schon herumgespielt - ohne Erfolg.

[sigi234]

@oliver-w-leibenguth

rgba(1, 1, 1, 1) none repeat scroll 0% 0% / auto padding-box border-box

[Ein ehemaliger Benutzer]

Ich kann Dir nicht ganz folgen, bei mir steht dort:

rgba(0, 0, 0, 0) linear-gradient(rgb(0, 0, 0) 0%, rgb(69, 72, 77) 100%) repeat scroll 0% 0% / auto padding-box border-box

Auch wenn ich da ein "[...] none repeat scroll [...]" draus mache, ändert das leider nix :-(

[sigi234]

@oliver-w-leibenguth

Hast du das genau so wie bei mir eingetragen?

[Homoran]

@sigi234 sagte in VIS CSS-Hintergrund wir nur im sichtbaren Bereich gerendert?:

@oliver-w-leibenguth

Hast du das genau so wie bei mir eingetragen?

@Oliver-W-Leibenguth
deswegen immer alles zeigen!

[OliverIO]

@oliver-w-leibenguth
Alternativ geht auch im css tab das folgende einzutragen

body {
    background-color: black;
    color: white;
}

black kann natürlich auch mit einem der Angaben da oben gefüllt werden.
Wobei mir da einige Angaben etwas seltsam vorkommen (padding-box, der slash)
und ob border-box mit den Angaben einiger widgets kompatibel ist?
Hier mal zur Definition von background. Das css propertie ist auch nur eine kurzform für verschiedene einzelnen Anweisungen. Wer soviele Angaben hat, sollte evtl die auf die direkten Anweisungen aufteilen, dann wird es auch klarer was was bedeutet.
https://developer.mozilla.org/en-US/docs/Web/CSS/background?retiredLocale=de

Diese Anweisung bei body hat den vorteil, das es den kompletten Hintergrund betrifft.
Die Angabe wie oben betrifft nur den container den iobroker als view darstellt. Wenn man dann explizite Größen der view angibt und man dennoch scrollen kann, dann ist der Bereich ausserhalb des containers nicht definiert und es erscheint der systemhintergrund des browsers

[Homoran]

Danke für die Erklärung!

@oliverio sagte in VIS CSS-Hintergrund wir nur im sichtbaren Bereich gerendert?:

Die Angabe wie oben betrifft nur den container den iobroker als view darstellt. Wenn man dann explizite Größen der view angibt und man dennoch scrollen kann, dann ist der Bereich ausserhalb des containers nicht definiert und es erscheint der systemhintergrund des browsers

das passt exakt!
ich hatte dann die fixen Größen zurückgenommen und der Background passte.
Ist ewig her, aber ich glaube dafür gab's dann anderen Ärger :joy:

[Ein ehemaliger Benutzer]

Dann müsste ein...

body {
    background: linear-gradient(rgb(0, 0, 0) 0%, rgb(69, 72, 77) 100%)
    color: white;
}

...eigentlich den gewünschen Effekt bringen, sieht in der Realität aber so aus:

das erhoffte Ergebnis ist hingegen so:

(Den Farbverlauf sieht man bei dem kleinen Stück jetzt natürlich nicht wirklich...)

[Ein ehemaliger Benutzer]

Ich hab mir mal meine Gedanken gemacht und bin zu dem Ergebnis gekommen, dass es bei einem Farbverlauf eigentlich auch nicht funktionieren kann:
Der Browser verteilt die Farben auf den sichtbaren Bereich des Bildschirms, hat (bei linearen Verläufen) oben 0% und ganz unten 100% der Farben hingemalt.
Der Teil des Bildschirms, den ich durch Scrollen quasi nachschiebe, liegt aber in dem Bereich jenseits der 100%. Dann könnte der Browser einfach mit der letzten Farbe weitermachen, zeichnet aber dummerweise den Systemhintergrund des Browsers.

[OliverIO]

@oliver-w-leibenguth
ich verstehe die antwort nicht so ganz und ist sie nicht auf eine andere frage gestellt?
so wie ich es verstanden habe, war der ausgangspunkt, das du scrollst und ausserhalb der view der systemhintergrund dargestellt wird. dazu habe ich die lösung angegeben.
wenn bereiche dann nicht so dargestellt werden, dann liegt es daran, das html-elemente, die in schichten darüber liegen, wieder eigene backgrounds haben, welche die anweisungen die darunter liegen überdecken.
html ist hierarchisch aufgebaut. das html und body tag bilden sozusagen die untersten ebenen, jedes weitere level der verschachtelung bildet wieder eine neue ebene welche darüber liegt.
jede ebene kann ja ein eigene background definition wieder haben. diese überdeckt dann, zumindest in den teilen der größe des elements dann den hintergrund des darunterliegenden elements

hier mal eine grafik die das etwas visualisiert

[Ein ehemaliger Benutzer]

@oliverio sagte in VIS CSS-Hintergrund wir nur im sichtbaren Bereich gerendert?:

so wie ich es verstanden habe, war der ausgangspunkt, das du scrollst und ausserhalb der view der systemhintergrund dargestellt wird. dazu habe ich die lösung angegeben.

...die aber nur bei einfarbigen Hintergründen und nicht bei CSS-generierten Verläufen funktioniert.

[OliverIO]

@oliver-w-leibenguth

wenn du denkst du hast einen fehler in der render engine deines browser gefunden:
für chrome/edge
https://bugs.chromium.org/p/chromium/issues/list
firefox
https://bugzilla.mozilla.org/describecomponents.cgi?product=Firefox
safari
https://bugs.webkit.org/
Opera
https://help.opera.com/en/touch/report-a-problem/

[Homoran]

@oliver-w-leibenguth sagte in VIS CSS-Hintergrund wir nur im sichtbaren Bereich gerendert?:

die aber nur bei einfarbigen Hintergründen und nicht bei CSS-generierten Verläufen funktioniert.

wobei immer noch die Frage offen ist

@sigi234 sagte in VIS CSS-Hintergrund wir nur im sichtbaren Bereich gerendert?:

Hast du das genau so wie bei mir eingetragen?

und auch CSS in Ebenen aufgebaut ist, wo

@oliverio sagte in VIS CSS-Hintergrund wir nur im sichtbaren Bereich gerendert?:

jede ebene kann ja ein eigene background definition wieder haben. diese überdeckt dann, zumindest in den teilen der größe des elements dann den hintergrund des darunterliegenden elements