How to make a header image respond to changes in screen size?

Issue

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; }

Solution

The problem persisted when viewing the website from a mobile device only. A less than ideal solution I came up with was to set the height of the image to be the WIDTH of the screen when on any screen size smaller than a laptop.

CSS:

@media only screen and (max-device-width: 1024px) and (orientation: landscape) {
  .intro-bg {
    height: 100vw !important;
  }
}

Answered By – JSON_Derulo

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published