How to override ChakraUI default background color with an image

Question

I'm just starting to use Chakra UI and I'm thoroughly confused with how to override their default themes. Specifically the background image. When I add the ChakraProvider to my main app, it sets a default white background to the page's body, and it ignores my own background image I set in my App.css Does someone know how to override this?

App.css

body {
    background-image: url("./images/forest.jpg");

    height: 100%;
    width: 100%;

    background-position: center;
    background-size: cover;
}

App.js

class App extends Component {
  render() {
    return (
      <ChakraProvider resetCSS={false}>
        <Provider store={store}>
          <Router>
            <div>
              *routes here*
            </div>
          </Router>
        </Provider>
      </ChakraProvider>
    );
  }
}

export default App;

This is what the inspector shows on the webpage. The ones marked with strikethrough are the ones being ignored. If uncheck the background property that chakra-ui provides by default with the white color, my background image then appears

body {
    font-family: var(--chakra-fonts-body);
    color: var(--chakra-colors-gray-800);
    background: var(--chakra-colors-white);
    -webkit-transition: background-color 0.2s;
    transition: background-color 0.2s;
    line-height: var(--chakra-lineHeights-base);
}
body {
    background-image: url(/static/media/forest.04032f88.jpg); *strikethrough*
    height: 100%;
    width: 100%;
    background-position: center; *strikethrough*
    background-size: cover; *strikethrough*
}

Answer 1

put "!important" at the end. eg:- background-image: url("./images/forest.jpg") !important;