I want to blur only the background of my grid, but it focuses entirely on React using MakeStyles

Question

I hava a page that I have my course informations and i want add some background with a blur, but when I add this blur, all of my grid get a blur and I can see anything, how i can put blur only on my background?

My code is it:

        <Grid
          className={classes.backgroundDescription}
          item
          xs={12}
          md={6}>
          <div>
            <CourseDescription onLike={onLike} data={info} icon={icon} />
          </div>
        </Grid>

const useStyle = makeStyles((theme) => ({
  backgroundDescription: {
    backgroundColor: '#4040ff',
    filter: 'blur(10px)',
  }
)}

I tried a lot of things, separte the divs and grids, use a backdropFilter, comeyhing like this and it doest works too

This is with a filter blur This is whit out a filter

Remeber that I want the background blue with a blur, only a background

Answer 1

You have use position attribute of css

1.create a dummy div for background

Importantly don't add your element into dummy div. Apply this css like

     .dummydiv{

      position:relative;

     }

    .element {
       position: absolute;
       top:0;
       left:0;
     }

Answer 2

Include the following CSS to attain a precise and accurate solution,

const useStyles = makeStyles((theme) => ({
   backgroundDescription: {
       position: 'relative',
       overflow: 'hidden',
       '&::before': {
           content: '""',
           position: 'absolute',
           top: 0,
           left: 0,
           width: '100%',
           height: '100%',
           backgroundColor: '#4040ff',
           backgroundImage: url('image-url-here')
           backgroundSize: 'cover',
           backgroundPosition: 'center',
           filter: 'blur(10px)',
       },
       '& > div': {
           position: 'relative',
           zIndex: 1,
       },
   },
}));