Css banner not showing up

I have some CSS right here, and the banner I put isn't showing up. Any help?

css:

.home {
display: flex;
background: url('./images/banner.jpg') no-repeat center;
height: 100vh;
}

html:

<section class="home" id="home">
  <div class="max-width">
    <div class="home-content">
      <div class="text-1">Hello, my name is</div>
      <div class="text-2">Sefatul Bahar</div>
      <div class="text-3">And I'm an <span>accountant</span></div>
    </div>
  </div>
</section>

Solution

This might make more sense with the HTML too. You didn't provide your HTML so I'm not exactly sure what you're going for but this is as good as i can get with just a little bit of CSS.

/*I used a different image just to see if this would work*/

.home {
    display: flex;
    background: url(https://wallpaperaccess.com/full/187161.jpg);
    /*you were missing the -repeat and -position*/
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh;
}

<!DOCTYPE html>
<html lang="en">

<head>

    <title>Help</title>

</head>

<body>
    <main class="home">
        <div>
            <h1> Hello </h1>
        </div>
    </main>

</body>

</html>

/*I used a different image just to see if this would work*/

.home {
    display: flex;
    background: url(https://wallpaperaccess.com/full/187161.jpg);
  /*you were missing the -repeat and -position*/
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh;
}