diff --git a/src/assets/images/components/page-settings/theme-4.png b/src/assets/images/components/page-settings/theme-4.png
index 22b63e44..59a733e0 100644
Binary files a/src/assets/images/components/page-settings/theme-4.png and b/src/assets/images/components/page-settings/theme-4.png differ
diff --git a/src/assets/images/components/page-settings/theme-5.png b/src/assets/images/components/page-settings/theme-5.png
index 77cf6a4a..d2f85afe 100644
Binary files a/src/assets/images/components/page-settings/theme-5.png and b/src/assets/images/components/page-settings/theme-5.png differ
diff --git a/src/assets/movie.mp4 b/src/assets/movie.mp4
deleted file mode 100644
index 3b468401..00000000
Binary files a/src/assets/movie.mp4 and /dev/null differ
diff --git a/src/components/common/common-styles/index.vue b/src/components/common/common-styles/index.vue
index 3bd09c52..df78bbce 100644
--- a/src/components/common/common-styles/index.vue
+++ b/src/components/common/common-styles/index.vue
@@ -11,14 +11,20 @@
                         <div class="flex-row jc-sb align-c">
                             <div class="size-12">背景图</div>
                             <el-radio-group v-model="form.background_img_style" is-button @change="background_img_style_change">
-                                <el-tooltip content="单张" placement="top" effect="light">
-                                    <el-radio-button :value="0"><icon name="single-sheet"></icon></el-radio-button>
+                                <el-tooltip content="居上" placement="top" effect="light">
+                                    <el-radio-button value="0"><icon name="spread-over"></icon></el-radio-button>
+                                </el-tooltip>
+                                <el-tooltip content="居下" placement="top" effect="light">
+                                    <el-radio-button value="1"><icon name="spread-over"></icon></el-radio-button>
+                                </el-tooltip>
+                                <el-tooltip content="居中" placement="top" effect="light">
+                                    <el-radio-button value="2"><icon name="single-sheet"></icon></el-radio-button>
                                 </el-tooltip>
                                 <el-tooltip content="平铺" placement="top" effect="light">
-                                    <el-radio-button :value="1"><icon name="tile"></icon></el-radio-button>
+                                    <el-radio-button value="3"><icon name="tile"></icon></el-radio-button>
                                 </el-tooltip>
                                 <el-tooltip content="铺满" placement="top" effect="light">
-                                    <el-radio-button :value="2"><icon name="spread-over"></icon></el-radio-button>
+                                    <el-radio-button value="4"><icon name="spread-over"></icon></el-radio-button>
                                 </el-tooltip>
                             </el-radio-group>
                         </div>
@@ -72,7 +78,7 @@ const props = defineProps({
             direction: '180deg',
             background_img: [] as uploadList[],
             color_list: [{ color: '', color_percentage: undefined }] as color_list[],
-            background_img_style: 2,
+            background_img_style: '0',
             floating_up: 0,
             padding: 0,
             padding_top: 0,
@@ -115,7 +121,7 @@ const props = defineProps({
     isFloatingUp: {
         type: Boolean,
         default: true,
-    }
+    },
 });
 // value 和初始化数据合并数据
 let form = ref(props.value);
diff --git a/src/config/const/index.ts b/src/config/const/index.ts
index 77abcbd5..f60ea230 100644
--- a/src/config/const/index.ts
+++ b/src/config/const/index.ts
@@ -1,7 +1,7 @@
 const defaultCommon: componentsCommonCommonStyle = {
     direction: '90deg',
     color_list: [{ color: '', color_percentage: undefined }],
-    background_img_style: 2,
+    background_img_style: '0',
     floating_up: 0,
     padding: 0,
     padding_top: 0,
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index dd70447f..17242e2a 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -77,7 +77,7 @@ declare global {
      */
     type backgroundImgUrlStyle = {
         background_img: uploadList[];
-        background_img_style: number;
+        background_img_style: string;
     };
 
     /**
@@ -86,7 +86,7 @@ declare global {
     type componentsCommonCommonStyle = {
         color_list: color_list[];
         direction: string;
-        background_img_style: number;
+        background_img_style: string;
         floating_up: number;
         padding: number;
         padding_top: number;
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 31542c71..9c67c31c 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,7 +1,6 @@
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import { commonStore } from '@/store';
-import CommonAPI from '@/api/common';
 import App from '@/App.vue';
 const app = createApp(App);
 const pinia = createPinia();
@@ -196,13 +195,29 @@ export function box_shadow_computer(new_style: boxShadowStyle) {
 export function background_computer(new_style: backgroundImgUrlStyle) {
     if (new_style.background_img.length > 0) {
         let url_styke = '';
-        if (new_style.background_img_style == 1) {
+        if (new_style.background_img_style == '1') {
             url_styke = 'background-repeat: repeat;';
-        } else if (new_style.background_img_style == 2) {
-            url_styke = 'background-size: cover;background-position: center;';
+        } else if (new_style.background_img_style == '2') {
         } else {
             url_styke = `background-repeat: no-repeat;background-position: center;`;
         }
+        switch (new_style.background_img_style) {
+            case '1':
+                url_styke = `background-repeat: no-repeat;background-position: bottom;background-size: 100% auto;`;
+                break;
+            case '2':
+                url_styke = `background-repeat: no-repeat;background-position: center;background-size: 100% auto;`;
+                break;
+            case '3':
+                url_styke = 'background-repeat: repeat;';
+                break;
+            case '4':
+                url_styke = 'background-size: cover;background-position: center;';
+                break;
+            default:
+                url_styke = `background-repeat: no-repeat;background-position: top;background-size: 100% auto;`;
+                break;
+        }
         return `background-image:url(${new_style.background_img[0].url});${url_styke}`;
     } else {
         return '';