Background Image Display in Viewport

Question

I have a background image that covers the screen. When the viewport shrinks, the view shrinks towards the top left of the image. Is there a way to shrink the viewport towards the center of the background?

<section class="hero">

</section>

.hero {
    height: 100vh;
    width: 100%;
    background-image: url('img/myimg.jpg');
    background-size: cover;
    background-attachment: fixed;
}