The header image on the website I am working on responds to changes in screen size when going down in size (smaller) however, does not respond when going to a bigger screen size.
Link: Removed
If you go to a smaller screen size, refresh, and then expand the window, you will see the problem. The bottom of the image becomes cut off with a black space filling the area.
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; }