Reputation: 85
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?
Upvotes: 0
Views: 1355
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
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