I have the following code

```
.header-background {
    position: static;
    display: block;
    overflow: visible;
    top: 0;
    height: 100%;
    min-height: 750px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(50,58,69,0.9)));
    background-image: linear-gradient(180deg, rgba(50,58,69,0.55),  rgba(50,58,69,0.74)), url(images/Tra.png);
    flex-direction: column;
    background-position: 0px 0px, 50% 0%;
    background-size: auto, cover;
    white-space: normal;
    object-fit: fill;
    -o-object-fit: fill;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
}

```

which produces the following (first picture is 13 inch monitor, second picture is 24 inch monitor)

[![13 inch monitor](https://i.stack.imgur.com/r7Tip.jpg)](https://i.stack.imgur.com/r7Tip.jpg)

[![24 inch monitor](https://i.stack.imgur.com/Zkrjk.jpg)](https://i.stack.imgur.com/Zkrjk.jpg)

I know that this cut-off problem should have to do something with `min-height`, not quite sure how though. The picture itself is bigger than shown in the 24 inch screen as can be seen by the 13 inch version. Any ideas how to fix that problem?