I expect the background image to fill the entire .hero section, but the image doesn’t display properly.

I’m trying to add a background image to a .hero class in my HTML, but it’s not displaying correctly. I’ve tried applying the background image to both the body and the .hero class, but the result remains the same.
I also tried to checked it on Chrome and Edge and even tried with other photos, I put the photos in my files so I didn’t just copy the url.
What have I done wrong?
here is my HTML code:

    <div class="hero">
        <div class="container">
    <h1>The landscape of your dream awaits</h1>
        </div>
        </div>

here is my CSS code:

.hero {
    height: 100%;
    background-image: url(./istockphoto-583809524-612x612.jpg) no-repeat center;
    background-size: cover;
}