diff --git a/ui/components/History.vue b/ui/components/History.vue
index ddc5d985..000eaf27 100644
--- a/ui/components/History.vue
+++ b/ui/components/History.vue
@@ -275,6 +275,9 @@ const video_item = ref(null)
 const playVideo = item => video_item.value = item
 const closeVideo = () => video_item.value = null
 
+const bg_enable = useStorage('random_bg', true)
+const bg_opacity = useStorage('random_bg_opacity', 0.85)
+
 watch(masterSelectAll, (value) => {
   for (const key in stateStore.history) {
     const element = stateStore.history[key]
@@ -493,4 +496,11 @@ const reQueueItem = item => {
 }
 
 const pImg = e => e.target.naturalHeight > e.target.naturalWidth ? e.target.classList.add('image-portrait') : null
+watch(video_item, v => {
+  if (!bg_enable.value) {
+    return
+  }
+
+  document.querySelector('body').setAttribute("style", `opacity: ${ v ? 1 : bg_opacity.value}`)
+})
 </script>
diff --git a/ui/components/Queue.vue b/ui/components/Queue.vue
index d5b68b33..8abfe058 100644
--- a/ui/components/Queue.vue
+++ b/ui/components/Queue.vue
@@ -167,6 +167,9 @@ const showQueue = useStorage('showQueue', true)
 const hideThumbnail = useStorage('hideThumbnailQueue', false)
 const embed_url = ref('')
 
+const bg_enable = useStorage('random_bg', true)
+const bg_opacity = useStorage('random_bg_opacity', 0.85)
+
 watch(masterSelectAll, (value) => {
   for (const key in stateStore.queue) {
     const element = stateStore.queue[key];
@@ -337,4 +340,11 @@ const cancelItems = item => {
 }
 
 const pImg = e => e.target.naturalHeight > e.target.naturalWidth ? e.target.classList.add('image-portrait') : null
+watch(embed_url, v => {
+  if (!bg_enable.value) {
+    return
+  }
+  document.querySelector('body').setAttribute("style", `opacity: ${ v ? 1 : bg_opacity.value}`)
+})
+
 </script>