The important thing to note is that a background image behaves differently to an absolute image that is put in the content of a page. They are rendered differently in HTML.
The background image in the header has to cover the whole of the header section, top to bottom and side to side, so when the aspect ratio of the area changes, then some of the image will be cut off from either the top/bottom or the sides, depending on the aspect ratio of the image and the aspect ratio of the device screen/browser window.
If you need the whole of the background image to always be visible (and displaying more like an absolute image that is placed in the content of a page), without anything being cut off, then you can use the following custom CSS to change how the background is displayed. But instead of seeing parts of the image being cut off, you will instead see empty space either above/below or to the sides of the image.
.main-header {
background-size: contain;
background-position: center;
}