Image on footer does not stay on the footer and moves when you scroll up/down

Question

There's a small icon I want to add at the bottom of the footer and it scrolls up or down when I scroll instead of staying put.

I'm not sure if the image might be set up as sticky on a scroll or perhaps and most likely a CSS error.

I have tried setting up the image as fixed on the CSS section but what it mostly does is just move the image to the left and it still scrolls up and down.

#footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100px;
}

.page-footer {
  background: #e85259;
}

.blurb p {
  color: #faf9f9;
  font-weight: 100;
}

.blurb a {
  color: #faf9f9;
  font-weight: 100;
}

.container-footer {
  margin: auto;
  width: 100%;
  text-align: center;
}

#footer-images ul {
  padding: 0;
}

#footer-images li {
  list-style: none;
  margin: 0 10px;
  display: block;
}

#footer-images ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

<!-- Start - Footer -->
<!-- Footer -->
<!-- Footer -->
<footer class="page-footer font-small">

  <!-- Footer Links -->
  <div class="container">

    <!-- Grid row-->
    <div class="row text-center d-flex justify-content-center pt-5 mb-3">

      <!-- Grid column -->
      <div class="col-md-3 blurb mb-3">
        <h6 class="text-uppercase font-weight-bold">
          <a href="#!">Quienes somos</a>
        </h6>
      </div>
      <!-- Grid column -->

      <!-- Grid column -->
      <div class="col-md-3 blurb mb-3">
        <h6 class="text-uppercase font-weight-bold">
          <a href="#!">Productos</a>
        </h6>
      </div>
      <!-- Grid column -->

      <!-- Grid column -->
      <div class="col-md-3 blurb mb-3">
        <h6 class="text-uppercase font-weight-bold">
          <a href="#!">Sucursales</a>
        </h6>
      </div>
      <!-- Grid column -->


      <!-- Grid column -->
      <div class="col-md-3 blurb  mb-3">
        <h6 class="text-uppercase font-weight-bold">
          <a href="#!">Contacto</a>
        </h6>
      </div>
      <!-- Grid column -->

    </div>
    <!-- Grid row-->

    <hr class="rgba-white-light" style="margin: 0 15%;">

    <div class="container-footer">
      <div id="footer">
        <div id="footer-images">
          <ul>
            <img class="img-responsive" width="89px" height="73px" img src="https://imgur.com/UwZrFN9">
          </ul>
        </div>
      </div>
    </div>
    <div class="col-md-8  blurd col-12 mt-5">

    </div>

    <!-- Grid row-->
    <div class="row d-flex text-center justify-content-center mb-md-0 mb-4">
      <!-- Grid column -->
      <div class="col-md-8  blurb col-12 mt-5">
        <p>+(503) 2243-4887</p>
        <p style="line-height: 1.7rem">Calle Adriatico y avenida rio Amazonas No. 1 Jardines de Guadaluppe, Antiguo Cuscatlan, El Salvador.</p>
        <p>© Jardin del Pan todos los derechos resevador</p>
      </div>`enter code here`
      <!-- Grid column -->

    </div>
    <!-- Grid row-->
    <hr class="clearfix d-md-none rgba-white-light" style="margin: 10% 15% 5%;">

    <!-- Grid row-->
    <div class="row pb-3">

      <!-- Grid column -->

</footer>
<!-- End - Footer -->

Answer 1

Position: fixed; will make the image stick to the display. I think you're looking for position: absolute; so the image will be stick to its relative parent. In this case, probably the footer container.

#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100px;
}

.page-footer {
  background: #e85259;
}

.blurb p {
  color: #faf9f9;
  font-weight: 100;
}

.blurb a {
  color: #faf9f9;
  font-weight: 100;
}

.container-footer {
  margin: auto;
  width: 100%;
  text-align: center;
}

#footer-images ul {
  padding: 0;
}

#footer-images li {
  list-style: none;
  margin: 0 10px;
  display: block;
}

#footer-images ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

<!-- Start - Footer -->
<!-- Footer -->
<!-- Footer -->
<footer class="page-footer font-small">

  <!-- Footer Links -->
  <div class="container">

    <!-- Grid row-->
    <div class="row text-center d-flex justify-content-center pt-5 mb-3">

      <!-- Grid column -->
      <div class="col-md-3 blurb mb-3">
        <h6 class="text-uppercase font-weight-bold">
          <a href="#!">Quienes somos</a>
        </h6>
      </div>
      <!-- Grid column -->

      <!-- Grid column -->
      <div class="col-md-3 blurb mb-3">
        <h6 class="text-uppercase font-weight-bold">
          <a href="#!">Productos</a>
        </h6>
      </div>
      <!-- Grid column -->

      <!-- Grid column -->
      <div class="col-md-3 blurb mb-3">
        <h6 class="text-uppercase font-weight-bold">
          <a href="#!">Sucursales</a>
        </h6>
      </div>
      <!-- Grid column -->


      <!-- Grid column -->
      <div class="col-md-3 blurb  mb-3">
        <h6 class="text-uppercase font-weight-bold">
          <a href="#!">Contacto</a>
        </h6>
      </div>
      <!-- Grid column -->

    </div>
    <!-- Grid row-->

    <hr class="rgba-white-light" style="margin: 0 15%;">

    <div class="container-footer">
      <div id="footer">
        <div id="footer-images">
          <ul>
            <img class="img-responsive" width="89px" height="73px" img src="https://imgur.com/UwZrFN9">
          </ul>
        </div>
      </div>
    </div>
    <div class="col-md-8  blurd col-12 mt-5">

    </div>

    <!-- Grid row-->
    <div class="row d-flex text-center justify-content-center mb-md-0 mb-4">
      <!-- Grid column -->
      <div class="col-md-8  blurb col-12 mt-5">
        <p>+(503) 2243-4887</p>
        <p style="line-height: 1.7rem">Calle Adriatico y avenida rio Amazonas No. 1 Jardines de Guadaluppe, Antiguo Cuscatlan, El Salvador.</p>
        <p>© Jardin del Pan todos los derechos resevador</p>
      </div>`enter code here`
      <!-- Grid column -->

    </div>
    <!-- Grid row-->
    <hr class="clearfix d-md-none rgba-white-light" style="margin: 10% 15% 5%;">

    <!-- Grid row-->
    <div class="row pb-3">

      <!-- Grid column -->

</footer>
<!-- End - Footer -->

Answer 2

If you want to add your footer image as fixed you will need to add !important command after your fixed command ie - position: fixed!important; That should solve this issue.

    #footer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100px;
    }
    
    .page-footer {
      background: #e85259;
    }
    
    .blurb p {
      color: #faf9f9;
      font-weight: 100;
    }
    
    .blurb a {
      color: #faf9f9;
      font-weight: 100;
    }
    
    .container-footer {
      margin: auto;
      width: 100%;
      text-align: center;
    }
    
    #footer-images ul {
      padding: 0;
    }
    
    #footer-images li {
      list-style: none;
      margin: 0 10px;
      display: block;
    }
    
    #footer-images ul {
      display: flex;
      justify-content: center;
      align-items: center;
    }