Search code examples
htmlbootstrap-4flexboxbackground-imagesticky-footer

How to remove blank space between background image and flex footer?

I believe my background img is creating a blank space between it and my flexbox sticky footer. I’ve tried numerous ways, but they just create different problems so far... Can someone help? I created a placeholder image that’s the size of my original background img to recreate the problem for you! Thanks!

JS Fiddle Link

CSS:

.masthead {
  height: 100vh;
  min-height: 100%;
  background:; /* ie 6 cheat */
  background-image: url('http://via.placeholder.com/3024x4032?Placeholder%27');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Sticky Footer Classes */
body
 {
    display: flex;
    flex-direction: column;
}

html, body
 {
height: 100%;
}

#page-content {
    flex: 1 0 auto;
}

#sticky-footer {
  flex-shrink: 0;
}
Solution

  • This can be solved in multiple ways,

    Method 0: I think there is some unwanted text content before the Footer tag. If that text content is intentional then move to Method 2 else do this

    Remove this below code snippet which under the <body class="d-flex flex-column">

      <div id="page-content">
    <div class="container text-center">
      <div class="row justify-content-center">
        <div class="col-md-7">
          <h1 class="font-weight-light mt-4 text-white">Sticky Footer using Flexbox</h1>
          <p class="lead text-white-50">Use just two Bootstrap 4 utility classes and three custom CSS rules and you will have a flexbox enabled sticky footer for your website!</p>
        </div>
      </div>
    </div>
<div id="push"></div>
  </div>

    Method 1: Moving the footer towards the place where the content ends.

    #sticky-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

    or Method 2: In the style .css file Move the CSS background-image description defined under the class .masthead to the body

      background:; /* ie 6 cheat */
  background-image: url('http://via.placeholder.com/3024x4032?Placeholder');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

    (use this in body not in .masthead)