Lazyload background images

by seankoole

HTML

<div style="height: 2000px;"></div>
<!-- Maintain Aspect-ratio -->
<picture>
  <source srcset="https://fanboxio.github.io/headglitch.com/public/images/home/home-bg-header.jpg" media="(min-width: 747px)">

  <img loading="lazy" src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__340.jpg" />
  <figcaption>
    Aspect ratio
  </figcaption>
</picture>

SCSS

picture {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  display: flex;

  img {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  figcaption {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 48px;
    color: white;
  }
}