diff --git a/blocksuite/affine/blocks/note/src/components/edgeless-note-background.ts b/blocksuite/affine/blocks/note/src/components/edgeless-note-background.ts
index fbe0792dc..fcd8f962f 100644
--- a/blocksuite/affine/blocks/note/src/components/edgeless-note-background.ts
+++ b/blocksuite/affine/blocks/note/src/components/edgeless-note-background.ts
@@ -26,10 +26,9 @@ import {
 import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
 import type { BlockModel } from '@blocksuite/store';
 import { consume } from '@lit/context';
-import { computed } from '@preact/signals-core';
-import { html, nothing } from 'lit';
+import { computed, effect } from '@preact/signals-core';
+import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
-import { styleMap } from 'lit/directives/style-map.js';
 
 import { NoteConfigExtension } from '../config';
 import * as styles from './edgeless-note-background.css';
@@ -150,15 +149,20 @@ export class EdgelessNoteBackground extends SignalWatcher(
     return header;
   }
 
+  override connectedCallback() {
+    super.connectedCallback();
+    this.classList.add(styles.background);
+    this.disposables.add(
+      effect(() => {
+        Object.assign(this.style, this.backgroundStyle$.value);
+      })
+    );
+    this.disposables.addFromEvent(this, 'pointerdown', stopPropagation);
+    this.disposables.addFromEvent(this, 'click', this._handleClickAtBackground);
+  }
+
   override render() {
-    return html`<div
-      class=${styles.background}
-      style=${styleMap(this.backgroundStyle$.value)}
-      @pointerdown=${stopPropagation}
-      @click=${this._handleClickAtBackground}
-    >
-      ${this.note.isPageBlock() ? this._renderHeader() : nothing}
-    </div>`;
+    return this.note.isPageBlock() ? this._renderHeader() : nothing;
   }
 
   @consume({ context: stdContext })
diff --git a/blocksuite/affine/widgets/drag-handle/src/utils.ts b/blocksuite/affine/widgets/drag-handle/src/utils.ts
index 77996248a..0190504dc 100644
--- a/blocksuite/affine/widgets/drag-handle/src/utils.ts
+++ b/blocksuite/affine/widgets/drag-handle/src/utils.ts
@@ -1,7 +1,8 @@
 import { type CalloutBlockComponent } from '@blocksuite/affine-block-callout';
 import {
   AFFINE_EDGELESS_NOTE,
-  type EdgelessNoteBlockComponent,
+  EdgelessNoteBackground,
+  EdgelessNoteBlockComponent,
 } from '@blocksuite/affine-block-note';
 import { ParagraphBlockComponent } from '@blocksuite/affine-block-paragraph';
 import {
@@ -282,14 +283,21 @@ export function getDuplicateBlocks(blocks: BlockModel[]) {
  * Get hovering note with given a point in edgeless mode.
  */
 function getHoveringNote(point: Point) {
-  return (
-    document
-      .elementsFromPoint(point.x, point.y)
-      .find(
-        (e): e is EdgelessNoteBlockComponent =>
-          e.tagName.toLowerCase() === AFFINE_EDGELESS_NOTE
-      ) || null
-  );
+  const elements = document.elementsFromPoint(point.x, point.y);
+  for (const el of elements) {
+    if (el instanceof EdgelessNoteBlockComponent) {
+      return el;
+    }
+
+    // When in edit mode for edgeless-note, the rect of note-background is larger than
+    // that of edgeless-note. Therefore, when the point is located in the area between
+    // note-background and edgeless-note, using elementsFromPoint alone cannot correctly
+    // retrieve the edgeless-note.
+    if (el instanceof EdgelessNoteBackground) {
+      return el.closest(AFFINE_EDGELESS_NOTE) ?? null;
+    }
+  }
+  return null;
 }
 
 export function getSnapshotRect(snapshot: SliceSnapshot): Bound | null {
diff --git a/tests/blocksuite/e2e/edgeless/note/drag-handle.spec.ts b/tests/blocksuite/e2e/edgeless/note/drag-handle.spec.ts
index 99ea5a5a4..5f30782d9 100644
--- a/tests/blocksuite/e2e/edgeless/note/drag-handle.spec.ts
+++ b/tests/blocksuite/e2e/edgeless/note/drag-handle.spec.ts
@@ -216,3 +216,33 @@ test('should keep relative order of new note when a block is dragged from note t
   await waitNextFrame(page);
   await assertRichTexts(page, ['3', '5', '6', '7', '9']);
 });
+
+test('drag handle should work when hover on the background of a selected edgeless note', async ({
+  page,
+}) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+  await focusRichText(page);
+  await type(page, 'hello');
+  await switchEditorMode(page);
+  await page.mouse.dblclick(CENTER_X, CENTER_Y);
+  // wait for the note animation
+  await waitNextFrame(page, 400);
+
+  const noteRect = await page.locator('affine-edgeless-note').boundingBox();
+  assertRectExist(noteRect);
+
+  const noteBackgroundRect = await page
+    .locator('edgeless-note-background')
+    .boundingBox();
+  assertRectExist(noteBackgroundRect);
+
+  const paragraphRect = await page.locator('affine-paragraph').boundingBox();
+  assertRectExist(paragraphRect);
+
+  // move to the area between note background and note block and before the paragraph
+  const x = (noteRect.x + noteBackgroundRect.x) / 2;
+  const y = paragraphRect.y + paragraphRect.height / 2;
+  await page.mouse.move(x, y, { steps: 2 });
+  await expect(page.locator('.affine-drag-handle-container')).toBeVisible();
+});
diff --git a/tests/blocksuite/e2e/edgeless/note/undo-redo.spec.ts b/tests/blocksuite/e2e/edgeless/note/undo-redo.spec.ts
index 5ddcc9e79..113be8a4a 100644
--- a/tests/blocksuite/e2e/edgeless/note/undo-redo.spec.ts
+++ b/tests/blocksuite/e2e/edgeless/note/undo-redo.spec.ts
@@ -148,7 +148,7 @@ test('undo/redo should work when change note custom background', async ({
   await selectNoteInEdgeless(page, noteId);
 
   const getNoteBackground = async () => {
-    return page.locator('edgeless-note-background > div').evaluate(el => {
+    return page.locator('edgeless-note-background').evaluate(el => {
       return getComputedStyle(el).backgroundColor;
     });
   };