diff --git a/ui/src/conversation-panel/main/chat-panel/index.vue b/ui/src/conversation-panel/main/chat-panel/index.vue
index fd6126b6047..fa71efb4d2a 100644
--- a/ui/src/conversation-panel/main/chat-panel/index.vue
+++ b/ui/src/conversation-panel/main/chat-panel/index.vue
@@ -22,8 +22,14 @@ const handleDrop = (e: DragEvent) => input.addFiles(e.dataTransfer?.files)
   <main class="mk-conversation-main" @drop.prevent="handleDrop" @dragover.prevent>
     <!-- 头部可被替换(如 debug 用 debug header);默认普通 chat header -->
     <slot name="header"><ChatHeader :shareable="shareable" @share="emit('share')" /></slot>
-    <MessageList :key="list.currentChatId.value" :app-name="list.appInfo.value?.name || 'AI 助手'"></MessageList>
+    <!-- 聊天背景铺满标题栏以下的消息区与输入区，与显示设置预览一致 -->
+    <div
+      class="flex-column min-h-0 flex-1 bg-cover bg-center"
+      :style="{ backgroundImage: list.appInfo.value?.chat_background ? `url(${JSON.stringify(list.appInfo.value.chat_background)})` : undefined }"
+    >
+      <MessageList :key="list.currentChatId.value" :app-name="list.appInfo.value?.name || 'AI 助手'"></MessageList>
 
-    <footer v-if="!list.isShared.value" class="mk-conversation-content flex-center shrink-0 p-4"><MessageInput /></footer>
+      <footer v-if="!list.isShared.value" class="mk-conversation-content flex-center shrink-0 p-4"><MessageInput /></footer>
+    </div>
   </main>
 </template>
diff --git a/ui/src/conversation-panel/main/display-panel/index.vue b/ui/src/conversation-panel/main/display-panel/index.vue
index 5d3d7591687..206dd33b2c6 100644
--- a/ui/src/conversation-panel/main/display-panel/index.vue
+++ b/ui/src/conversation-panel/main/display-panel/index.vue
@@ -8,6 +8,12 @@ const list = useConversationListStore()
   <!-- 只显示变体:仅 message-list,无 header、无 message-input(不发起对话)。
        里面的 form 拿不到发送能力时自动只读。 -->
   <main class="mk-conversation-main">
-    <MessageList :key="list.currentChatId.value" :app-name="list.appInfo.value?.name || 'AI 助手'" />
+    <!-- 聊天背景铺满消息区，与显示设置预览一致 -->
+    <div
+      class="flex-column min-h-0 flex-1 bg-cover bg-center"
+      :style="{ backgroundImage: list.appInfo.value?.chat_background ? `url(${JSON.stringify(list.appInfo.value.chat_background)})` : undefined }"
+    >
+      <MessageList :key="list.currentChatId.value" :app-name="list.appInfo.value?.name || 'AI 助手'" />
+    </div>
   </main>
 </template>