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
2
Answers
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
Include the following
CSS
to attain a precise and accurate solution,