diff --git a/res/themes/light/css/_mods.scss b/res/themes/light/css/_mods.scss
index 8429df5c3a..30aaeedf8f 100644
--- a/res/themes/light/css/_mods.scss
+++ b/res/themes/light/css/_mods.scss
@@ -6,7 +6,7 @@
 
 @supports (backdrop-filter: none) {
     .mx_LeftPanel {
-        background-image: var(--avatar-url);
+        background-image: var(--avatar-url, unset);
         background-repeat: no-repeat;
         background-size: cover;
         background-position: left top;
diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx
index 4066fc6f1d..262d12a700 100644
--- a/src/components/structures/LeftPanel.tsx
+++ b/src/components/structures/LeftPanel.tsx
@@ -119,8 +119,11 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         if (settingBgMxc) {
             avatarUrl = MatrixClientPeg.get().mxcUrlToHttp(settingBgMxc, avatarSize, avatarSize);
         }
+
         const avatarUrlProp = `url(${avatarUrl})`;
-        if (document.body.style.getPropertyValue("--avatar-url") !== avatarUrlProp) {
+        if (!avatarUrl) {
+            document.body.style.removeProperty("--avatar-url");
+        } else if (document.body.style.getPropertyValue("--avatar-url") !== avatarUrlProp) {
             document.body.style.setProperty("--avatar-url", avatarUrlProp);
         }
     };