Honour user-selected background image from settings

Fixes element-hq/element-web#18705

This is provided as an easter egg, but more importantly as an a11y workaround.

Author: turt2live

src/components/structures/LoggedInView.tsx

@@ -1,7 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 Vector Creations Ltd
-Copyright 2017, 2018, 2020 New Vector Ltd
+Copyright 2015 - 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -70,6 +68,7 @@ import SpaceStore from "../../stores/SpaceStore";
 import classNames from 'classnames';
 import GroupFilterPanel from './GroupFilterPanel';
 import CustomRoomTagPanel from './CustomRoomTagPanel';
+import { mediaFromMxc } from "../../customisations/Media";
 
 // We need to fetch each pinned message individually (if we don't already have it)
 // so each pinned message may trigger a request. Limit the number per room for sanity.
@@ -223,9 +222,14 @@ class LoggedInView extends React.Component<IProps, IState> {
     }
 
     private refreshBackgroundImage = async (): Promise<void> => {
-        this.setState({
-            backgroundImage: OwnProfileStore.instance.getHttpAvatarUrl(),
-        });
+        let backgroundImage = SettingsStore.getValue("RoomList.backgroundImage");
+        if (backgroundImage) {
+            // convert to http before going much further
+            backgroundImage = mediaFromMxc(backgroundImage).srcHttp;
+        } else {
+            backgroundImage = OwnProfileStore.instance.getHttpAvatarUrl();
+        }
+        this.setState({ backgroundImage });
     };
 
     private onAction = (payload): void => {