imp bg card Expertises

frontend/src/components/Expertises.jsx

@@ -1,5 +1,8 @@
 import React from "react";
 import { Box, Grid, Typography, Card, CardContent } from "@mui/material";
+import pictoMaitriseOeuvre from "../assets/picto-maitrise-oeuvre.avif";
+import pictoStructure from "../assets/picto-structure.avif";
+import pictoElectricite from "../assets/picto-electricite.avif";
 
 const Expertices = ({
   expertiseTitle,
@@ -31,14 +34,23 @@ const Expertices = ({
         {expertiseTitle}
       </Typography>
       <Grid container spacing={4}>
+
         {/* Expertise 1 */}
         <Grid item xs={12} md={4}>
           <Card
             sx={{
+              backgroundPosition: "center",
               boxShadow: 3,
               padding: 2,
               textAlign: "center",
               backgroundColor: "#fff",
+              backgroundImage: `
+              linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), 
+              url(${pictoMaitriseOeuvre})`,
+              backgroundPosition: "bottom left",
+              backgroundSize:  "50%",
+              backgroundRepeat: "no-repeat",
+              
             }}
           >
             <CardContent>
@@ -65,6 +77,12 @@ const Expertices = ({
               padding: 2,
               textAlign: "center",
               backgroundColor: "#fff",
+              backgroundImage: `
+              linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), 
+              url(${pictoStructure})`,
+              backgroundPosition: "bottom left",
+              backgroundSize:  "50%",
+              backgroundRepeat: "no-repeat",
             }}
           >
             <CardContent>
@@ -91,6 +109,12 @@ const Expertices = ({
               padding: 2,
               textAlign: "center",
               backgroundColor: "#fff",
+              backgroundImage: `
+              linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), 
+              url(${pictoElectricite})`,
+              backgroundPosition: "bottom left",
+              backgroundSize:  "50%",
+              backgroundRepeat: "no-repeat",
             }}
           >
             <CardContent>