The banner image on my website adjusts to smaller screen sizes, but doesn't adapt when the screen size increases.
Link: Removed
If you shrink the screen, refresh, and then expand it again, you'll notice that the bottom of the image gets cut off with a black space filling the gap.
HTML:
<div class="intro">
<div class="intro-inner">
<div class="intro-bg">
<div class="intro-bg-item">
<div class="intro-bg-item-image" style="background-image: url(css/images/pb/home-banner.jpg)"></div><!-- /.intro-bg-item-image -->
</div><!-- /.intro-bg-item -->
</div><!-- /.intro-bg -->
</div><!-- /.intro-inner -->
</div><!-- /.intro -->
CSS:
.intro { position: relative; text-align: center; color: #fff; background-color: #000; max-height: 100vh; overflow: hidden;}
.intro-inner { position: absolute; bottom: 0; top: 0; left: 0; right: 0; }
.intro:after { content: ''; display: block; padding-top: 45%; }
.intro:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 40%); z-index: 3; }
.intro-bg { position: fixed !important; height: 100% !important; }