diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index b4f95941d..4d30efb23 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -529,3 +529,9 @@ h5 {
 .custom-header {
   background: var(--el-color-primary-light-9) !important;
 }
+
+.chat-background {
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: auto 100%;
+}
diff --git a/ui/src/views/chat/pc/index.vue b/ui/src/views/chat/pc/index.vue
index 71999a098..d2fb70497 100644
--- a/ui/src/views/chat/pc/index.vue
+++ b/ui/src/views/chat/pc/index.vue
@@ -222,8 +222,8 @@
         </el-button>
       </div>
       <div
-        class="chat-pc__right"
-        :style="{ backgroundImage: `url(${applicationDetail?.custom_theme?.chat_background})` }"
+        class="chat-pc__right chat-background"
+        :style="{ backgroundImage: `url(${applicationDetail?.chat_background})` }"
       >
         <el-splitter>
           <el-splitter-panel>