Resize Image Expanding from Center CSS - html

Question

I have a header image on a page that I want to resize from the center, but by default the image resizes from the top down so the bottom of the image gets cut off instead of the top and bottom equally.
I have created a Fiddle to recreate the issue and the following code is the same as is in the fiddle. You can see as the window is resized to become bigger, the circles are cut off from view.
<div class="header-image" style="background-image: url(https://i.imgur.com/5AcO0gW.png) !important;">
<div class="line">
<hr class="position-absolute bluestrikethrough">
</div>
<div style="flex-grow: 0; flex-shrink: 0; ">
<h1 style="font-family: MillerItalic, Georgia, serif; font-size: 4em;" class="text-primary font-italic px-3">Big ol Title </h1>
</div>
<div class="line">
<hr class="position-absolute bluestrikethrough">
</div>
</div>
<div class="container">
<div class="py-3 px-5 border-bottom">
<h6>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</h6>
</div>
</div>
.bluestrikethrough {
z-index: 5;
top: 1.5em;
width: 100%;
border: none;
height: 3px;
color: #007bff;
/* old IE */
background-color: #007bff;
/* Modern Browsers */
}
.header-image {
display: flex;
background-size: cover !important;
background-color: #919191;
width: 100%;
border-radius: 0px !important;
padding-top: 7rem !important;
padding-bottom: 6rem !important;
margin-bottom: 0px;
margin-top: 0px !important;
}
.line {
position: relative;
width: 100%;
}
ul {
list-style-type: none;
}
#media (max-width: 480px) {
.header-image {
padding-bottom: 70px;
}
}

Answer 1

This can be done with the background-position property. I just added it to it like:
.header-image {
background-size: cover !important;
background-color: #919191;
width: 100%;
background-position: center; /*This line */
border-radius: 0px !important;
padding-top: 7rem !important;
padding-bottom: 6rem !important;
margin-bottom: 0px;
margin-top: 0px !important;
}
Although I ended up going with background-position: 50% 38%; for my real image.