diff --git a/frontend/src/Editor/Components/Image.jsx b/frontend/src/Editor/Components/Image.jsx
index a9819c75c0..e6fbb82186 100644
--- a/frontend/src/Editor/Components/Image.jsx
+++ b/frontend/src/Editor/Components/Image.jsx
@@ -3,7 +3,7 @@ import LazyLoad from 'react-lazyload';
 
 export const Image = function Image({ height, properties, styles, fireEvent }) {
   const { source } = properties;
-  const { visibility, disabledState, borderType } = styles;
+  const { visibility, disabledState, borderType, backgroundColor } = styles;
   const widgetVisibility = visibility ?? true;
   const imageRef = useRef(null);
   const [imageOffset, setImageOffset] = useState(0);
@@ -37,6 +37,7 @@ export const Image = function Image({ height, properties, styles, fireEvent }) {
           <img
             src={source}
             className={`${borderType !== 'none' ? borderType : ''}`}
+            style={{ backgroundColor }}
             height={height}
             onClick={() => fireEvent('onClick')}
           />
diff --git a/frontend/src/Editor/Components/components.js b/frontend/src/Editor/Components/components.js
index d481247f83..ea45354ddb 100644
--- a/frontend/src/Editor/Components/components.js
+++ b/frontend/src/Editor/Components/components.js
@@ -797,6 +797,7 @@ export const componentTypes = [
           { name: 'Thumbnail', value: 'img-thumbnail' },
         ],
       },
+      backgroundColor: { type: 'color', displayName: 'Background color' },
       visibility: { type: 'code', displayName: 'Visibility' },
       disabledState: { type: 'code', displayName: 'Disable' },
     },