Search code examples
htmlcssiconsstickybadge

trying to add a sticky veteran owned business badge to website

I've done a bit of research and I can only seem to find adding side bars and buttons which I'm not interested in adding. I have a png of the badge id like to add and I would like it to be sticky in the bottom right corner or the screen. any help would be much appreciated! thanks ahead of time.

Solution

  • Easiest way is to simply use position: fixed to that badge image. It will move the image out of flow and position it fixed inside the viewport. Use bottom + right-proeprty to align it in the bottom right corner:

    .badge {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

/* for demonstration purpose only */
body {
  margin: 0;
  min-height: 500vh;
  background: linear-gradient(to bottom, red, yellow, blue);
}
    <img class="badge" src="https://via.placeholder.com/50.jpg">