CODEWITHSUNDEEP
htmlcssimagebackgroundbackground-image
JoeGlas
JoeGlas

Reputation: 85

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

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

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?

Upvotes: 0

Views: 1355

Answers (2)

Joe
Joe

Reputation: 36

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.

Upvotes: 2

Amir Rezaei
Amir Rezaei

Reputation: 56

Instead of static position use fixed position, and apply this class to separate div tag in your html file to fit background image to your entire screen.

.header-background {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -10;
    height: 100%;
    width: 100%;
    background-size: cover;
    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);
 }

And in your html file add this tag without any child.

<div class="header-background"></div>

Upvotes: 2

Related Questions