How to do this on a Box in Chakra UI?

[ivanjeremic]

How would I set a backgroundImage like this in ChakraUI?

background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;

The prop has no effect.

The images are coming from the Unsplash API and the url look like this https://images.unsplash.com/photo-1601906406089-24e31e0ea77a?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE3MTgyM30

[ljosberinn]

can you clarify which prop has no effect, and could you provide a codesandbox? using background should do that, there's no need for -webkit-background-size etc.

[waptik]

How would I set a backgroundImage like this in ChakraUI?

background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;

The prop has no effect.

The images are coming from the Unsplash API and the url look like this https://images.unsplash.com/photo-1601906406089-24e31e0ea77a?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE3MTgyM30

I think you should wrap it a the css prop. I had same issue.

<Box
css={{
background: `url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;`
}}
/>

[ivanjeremic]

css prop does not exist in my version of ChakraUI was it removed?

[ljosberinn]

It might help mentioning your version. If its v1, use sx instead, css exists as _css iirc but is technically internally used, so sx is better..