How to add blur and opacity to background image without affecting the children?

Question

Currently working on a nextjs application and using mui, I'm struggling to add blur and opacity to a background image without affecting its children.

I am currently working on a nextjs application and using mui. To check the current build: https://ibb.co/9sN1FYS

      <Box
        sx={{
          background:
            'url(static/images/featured-equipments/doosan.jpg) 0 0 no-repeat',
          backgroundColor: 'background.paper',
          backgroundPosition: 'center',
          backgroundSize: 'cover',
          backgroundAttachment: 'fixed',
        }}
      >
        <Container>
          <Box sx={{ padding: '10px 0' }}>
            <StyledSlider>
              <Slider {...sliderSettings}>
                {equipments.map((equipment) => (
                  <Box sx={{ p: 1 }} key={equipment.title}>
                    <EquipmentItem equipment={equipment} />
                  </Box>
                ))}
              </Slider>
            </StyledSlider>
          </Box>
        </Container>
      </Box>```


  [1]: https://ibb.co/9sN1FYS

How to add blur and opacity to background image without affecting the children?

0 Answers0