diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 8a99c4ceb..15e5b7c57 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -186,14 +186,6 @@ export default {
     relationship () {
       return this.$store.getters.relationship(this.userId)
     },
-    style () {
-      return {
-        backgroundImage: [
-          'linear-gradient(to bottom, var(--profileTint), var(--profileTint))',
-          `url(${this.bannerImgSrc})`
-        ].join(', ')
-      }
-    },
     isOtherUser () {
       return this.user.id !== this.$store.state.users.currentUser.id
     },
@@ -419,11 +411,11 @@ export default {
     },
     resetImage () {
       if (this.editImage === 'avatar') {
-        this.newAvatar = ''
-        this.newAvatarFile = ''
+        this.newAvatar = null
+        this.newAvatarFile = null
       } else {
-        this.newBanner = ''
-        this.newBannerFile = ''
+        this.newBanner = null
+        this.newBannerFile = null
       }
       this.editImage = false
     },
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index df5ef53fd..0d117182d 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -111,7 +111,8 @@
     }
   }
 
-  .background-image {
+  .banner-overlay,
+  .banner-image {
     position: absolute;
     inset: 0;
     right: -1.2em;
@@ -119,11 +120,24 @@
     top: -1.4em;
     padding: 0;
     mask: linear-gradient(to top, transparent 0, white 5em) bottom no-repeat;
-    background-size: cover;
-    background-color: var(--profileBg);
     border-top-left-radius: calc(var(--roundness) - 1px);
     border-top-right-radius: calc(var(--roundness) - 1px);
+  }
+
+  .banner-image {
     z-index: -2;
+
+    img {
+      object-fit: cover;
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  .banner-overlay {
+    background-color: var(--profileTint);
+    pointer-events: none; // let user copy bg url
+    z-index: -1;
   }
 
   .bottom-buttons {
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 92dcc36d4..e0643a111 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -3,10 +3,15 @@
     <div class="user-card-inner">
       <div class="user-info">
         <div class="user-identity">
+          <div class="banner-image">
+            <img
+              :src="bannerImgSrc"
+              :class="{ 'hide-bio': hideBio }"
+            >
+          </div>
           <div
+            class="banner-overlay"
             :class="{ 'hide-bio': hideBio }"
-            :style="style"
-            class="background-image"
           />
           <a
             v-if="avatarAction === 'zoom'"