Background image gets cut off by 'min height' - how to fix that?

Question

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)

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?

Answer 1

try using:

height: auto;
min-height: 100vh;

vh stands for viewport height, so it will be the minimum height for the header element, if the height will be higher in some cases "height: auto" will automatically adjust it.

sorry for my english.