Lichess Background Bug

Chex100 edited

I have a lichess background and it works fine until i go to puzzles tab. The background just disappers and the black screen is replaceing the background. Is this supposed to be like this or is it a bug? I can still do my puzzels and other stuff but i want to have a background.

TheGoldfishKing

Yep, this is a bug:
https://github.com/ornicar/lila/issues/6684

Yep, this is a bug: https://github.com/ornicar/lila/issues/6684 Here are similar threads that might contain more info: https://lichess.org/forum/lichess-feedback/background-image-doesnt-load-on-the-analysis-page https://lichess.org/forum/lichess-feedback/bug--background-image-not-visible-on-tactics-or-analysis-board https://lichess.org/forum/lichess-feedback/background-picture-doesnt-show-in-opera https://lichess.org/forum/general-chess-discussion/why-is-there-no-transparent-background-when-in-puzzles

benwerner

Although I guess it's fair to call it a bug, it's not really something that Lichess can fix (or at least not without major issues). This is caused by your browser blocking the images on all pages that load Stockfish for certain reasons.

You can still have custom images on those pages if the site you're hosting your image on sets the "Cross-Origin-Resource-Policy: cross-origin" header but I don't think any public image host does that.

Although I guess it's fair to call it a bug, it's not really something that Lichess can fix (or at least not without major issues). This is caused by your browser blocking the images on all pages that load Stockfish for certain reasons. You can still have custom images on those pages if the site you're hosting your image on sets the "Cross-Origin-Resource-Policy: cross-origin" header but I don't think any public image host does that.

bufferunderrun edited

The workaround is to use Stylus and data URIs.
Basically, you need to convert your background to base64 and then add a userstyle:

@-moz-document domain("lichess.org") {
body.transp::before { background-image: url("data:image/jpeg;base64,YOUR-ENCODED-BASE64-GOES-HERE"); }
}

See https://lichess.org/page/extend for links to Stylus
And https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs for more info on data URIs.
https://lichess.org/forum/lichess-feedback/userstlyes-plugin-does-not-work-with-puzzle-and-analysis#7 might be helpful as well.

The workaround is to use Stylus and data URIs. Basically, you need to convert your background to base64 and then add a userstyle: @-moz-document domain("lichess.org") { body.transp::before { background-image: url("data:image/jpeg;base64,YOUR-ENCODED-BASE64-GOES-HERE"); } } See https://lichess.org/page/extend for links to Stylus And https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs for more info on data URIs. https://lichess.org/forum/lichess-feedback/userstlyes-plugin-does-not-work-with-puzzle-and-analysis#7 might be helpful as well.

Your network blocks the Lichess assets!