Responsive Background Image (And keeping Text centered in the middle of that) - html

Question

I am trying to code up a banner with a minimal amount of media queries, as in the past for header images and text, I can't figure out a way to use anything under 10.
My current issue:
I have a responsive background image that looks like this:
Header Image
However as the browser resizes, although the background image is being responsive, the container within the background div that houses the text is not resizing, therefore not keeping the text centered in the middle.
You can see something like this is happening:
Container overflowing
I've tried all kinds of things, heights on containers, removing heights. But all areas I end up getting to, I am having to do too many media queries to fix the text, or change the height of the image instead as the screen size goes down. I'd like to try and learn how to code a better header for this website that is more flexible and intuitive, that I can carry over too my future projects.
Here is the code HTML:
<section class="home_banner">
<?php
$featuredimage = get_the_post_thumbnail_url();
?>
<div class="banner_image" style="background-image: url('<?php echo $featuredimage; ?>'); ">
<div class="container">
<div class="banner_text_inner">
<p>Lorem Ipsum</p>
<div class="banner_excerpt">
<h1>Powerful engaging opening title</h1>
</div>
</div>
</div>
</div>
</section>
Here is the css:
.home_banner{
.banner_image {
background-size:100%;
height:100rem;
background-repeat: no-repeat;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
.banner_text_inner {
max-width: 1000px;
width: 100%;
margin: auto;
padding: 0 10px;
box-sizing: border-box;
font-family: $autumnchant;
font-size: 40px;
color: $color-primary;
#media (max-width: 1000px){
font-size: 30px;
p {
margin-bottom: 0;
}
}
#media (max-width: 400px){
font-size: 22px;
}
}
.banner_excerpt {
#media (max-width: 1000px){
h1 {
font-size: 40px;
}
}
#media (max-width: 400px){
h1 {
font-size: 30px;
line-height: 1;
letter-spacing: 5px;
margin-bottom: 0;
}
}
}
}
}

Answer 1

Try to add "background-size: cover;" to your banner-image and also add min-height.