Antdesign body background image

im new to coding, im learning by my own but I found a problem that I dont know how to resolve.

I want a background image in the body but im using antdesing and i cant modify styles in the layout component neither in a div before the component, pls I love some tips

I tried Adding style to the first layout component but nothing happens, and tried to name a classname, tried to add a div before all but nothing happens

import { Layout } from "antd";
import { Outlet } from "react-router-dom";
import Navbar from "../components/Navbar";
import Sidebar from "../components/Sidebar";
import { Col, Row } from "antd";
import Logo from "../components/Logo";
import { useState } from "react";
import Spinload from "../components/Spinload";

const { Header, Footer, Sider, Content } = Layout;

function Main() {
  const [siderCollapsed, setsiderCollapsed] = useState(true);
  return (
    <>
      <Layout style={{ height: "100vh" }}>
        <Header>
          <Row justify="space-between" align="middle">
            <Col span={6}>
              <Logo />
            </Col>
            <Col span={18}>
              <Navbar />
            </Col>
          </Row>
        </Header>

        <Layout>
          <Sider
            collapsible
            trigger={null}
            collapsed={siderCollapsed}
            onMouseEnter={() => setsiderCollapsed(false)}
            onMouseLeave={() => setsiderCollapsed(true)}
          >
            <Sidebar />
          </Sider>
          <Layout>
            <Content>
              <Spinload />
              <Outlet />
            </Content>
            <Footer>Footer</Footer>
          </Layout>
        </Layout>
      </Layout>
    </>
  );
}
export default Main;

i tried to modify style inline body from the index but i dont know how to do that my index look like this

import store from "./store/Store";
import { StrictMode } from "react";
import { Provider } from "react-redux";
import ReactDOM from "react-dom/client";
import Router from "./router/router";
import { ConfigProvider, theme } from "antd";
import "antd/dist/reset.css";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

root.render(
  <ConfigProvider
    theme={{
      algorithm: theme.defaultAlgorithm,
    }}
  >
    <Provider store={store}>
      <StrictMode>
        <Router />
      </StrictMode>
    </Provider>
  </ConfigProvider>
);

i want something like this

heres mine for the laugh

sorry for my english, im not native