basic article block backend working

resources/js/blocks/components/BackgroundImage.jsx

@@ -0,0 +1,33 @@
+import { useSelect } from '@wordpress/data';
+
+/**
+ * BackgroundImage
+ *
+ * This component is used to display a background image for a block based on its attributes.
+ *
+ * @param {object} props
+ * @param {string} props.background_image The url of the background image.
+ * @param {string} props.background_position The background-position property.
+ * @param {boolean} props.background_fixed Toggle for background-attachment: fixed.
+ * @param {number} props.background_opacity The opacity value applied to the image.
+ * @returns {*} React JSX
+ */
+export default function BackgroundImage({ background_url, background_position = 'center', background_fixed = false, background_opacity = 70 }) {
+
+	return (
+		<>
+			{background_url && (
+				<div
+          className="badegg-block-background"
+          style={{
+            backgroundImage: `url(${background_url})`,
+            backgroundPosition: background_position,
+            backgroundSize: 'cover',
+            backgroundAttachment: background_fixed ? 'fixed' : 'scroll',
+            opacity: Number(background_opacity) * 0.01,
+          }}
+        />
+			)}
+		</>
+	)
+}