diff --git a/public/site/blueprints/pages/track.yml b/public/site/blueprints/pages/track.yml
index 7a0134f..3289814 100644
--- a/public/site/blueprints/pages/track.yml
+++ b/public/site/blueprints/pages/track.yml
@@ -4,6 +4,11 @@ tabs:
   contentTab:
     label: Contenu
     fields:
+      backgroundColor:
+        label: Couleur de fond
+        type: color
+        default: "#E6E6E6"
+        placeholder: "#E6E6E6"
       views:
         label: Rendu
         type: files
diff --git a/public/site/models/project.php b/public/site/models/project.php
index d61cdd0..d657506 100644
--- a/public/site/models/project.php
+++ b/public/site/models/project.php
@@ -103,6 +103,7 @@ class ProjectPage extends NotificationsPage {
         $trackData = [
           'title' => (string) $track->title(),
           'slug' => (string) $track->slug(),
+          'backgroundColor' => (string) $track->backgroundColor(),
           'files' => [],
         ];        
         
diff --git a/src/components/project/virtual-sample/DynamicView.vue b/src/components/project/virtual-sample/DynamicView.vue
index 17321ea..2313fad 100644
--- a/src/components/project/virtual-sample/DynamicView.vue
+++ b/src/components/project/virtual-sample/DynamicView.vue
@@ -35,7 +35,11 @@
           v-if="activeTrack.files.length > 1"
           :activeTrack="activeTrack"
         />
-        <SingleImage v-else :file="activeTrack.files[0]" />
+        <SingleImage
+          v-else
+          :file="activeTrack.files[0]"
+          :backgroundColor="activeTrack.backgroundColor"
+        />
       </template>
       <div
         v-if="isCompareModeEnabled && activeTracks.length < 2"
diff --git a/src/components/project/virtual-sample/Interactive360.vue b/src/components/project/virtual-sample/Interactive360.vue
index 77075aa..356554e 100644
--- a/src/components/project/virtual-sample/Interactive360.vue
+++ b/src/components/project/virtual-sample/Interactive360.vue
@@ -1,5 +1,5 @@
 <template>
-  <figure>
+  <figure :style="'--bg-color:' + activeTrack.backgroundColor">
     <div
       @mousedown="enableDragToRotate"
       @touchstart="enableDragToRotate"
diff --git a/src/components/project/virtual-sample/SingleImage.vue b/src/components/project/virtual-sample/SingleImage.vue
index fd6169a..d0e3aa3 100644
--- a/src/components/project/virtual-sample/SingleImage.vue
+++ b/src/components/project/virtual-sample/SingleImage.vue
@@ -1,5 +1,5 @@
 <template>
-  <figure>
+  <figure :style="'--bg-color:' + backgroundColor">
     <img :src="file.url" alt="" />
   </figure>
 </template>
@@ -9,7 +9,8 @@ import { storeToRefs } from 'pinia';
 import { useVirtualSampleStore } from '../../../stores/virtualSample';
 import { watch } from 'vue';
 
-const { file } = defineProps({
+const { file, backgroundColor } = defineProps({
+  backgroundColor: String,
   file: Object,
 });