Image display too large, diverging from tutorial causes image display problem Options

[TonyH]

I'm following a Brad Traversy beginner tutorial on YouTube. He recommends that users diverge from the original layout to produce personalized Web Pages, so I did.

Under the header in his tutorial Brad has a "showcase.jpg" 1920 X 1280px image which is governed by code that shows only a small proportion of the image. He then goes on to move this partially hidden image around to focus on one central area of it. This is great for his purposes.

I'm trying to replace this with an image "mainPic.png" 5692 x3200px that will show in it's entirety.

Both the original image and my replacement image look massively too large for their allocated space, even when I scale down my replacement image to 1897 x 1066px.

Here's what I hope is the relevant HTML code:

CODE

<section id="showcase">
    <div class="container">
      <h1>My wannabee web page</h1>
      <p> I hope you can help</p>
    </div>
  </section>

And here is the CSS code:

CODE

#showcase{
  min-height: 400px;
  background:url('../img/showcase-01.png')no-repeat;
}

I hope the above makes enough sense for someone to suggest a method for getting my image to show fully.

Regards
and thanks for reading.

TonyH