Add option to dim the background image in BackgroundImage component

[mohitxskull]

Add option to dim the background image in BackgroundImage component

[rtivital]

you can do that with Overlay component

[mohitxskull]

              <Paper
                h={400}
                w={350}
                withBorder
                component={Link}
                href={blog.href}
              >
                <BackgroundImage src={blog.image} h="100%" p="md">
                  <Overlay color="#000" backgroundOpacity={0.85} />
                  <Stack h="100%" justify="end">
                    <Title order={3}>{blog.title}</Title>

                    <Text ta="right" size="xs">
                      {blog.date}
                    </Text>
                  </Stack>
                </BackgroundImage>
              </Paper>

Tried this but not working

Tried putting it in another positions too

Sorry for disturbing