背景图片的懒加载可以通过以下代码示例来解决：

1. 使用Intersection Observer API来检测元素是否进入视口：

2. 使用JavaScript将背景图片的URL应用到元素的样式中：

const lazyBgElements = document.querySelectorAll('.lazy-bg');

const lazyLoadBg = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const lazyBg = entry.target;
      const imgUrl = lazyBg.getAttribute('data-src');
      lazyBg.style.backgroundImage = `url(${imgUrl})`;
      observer.unobserve(lazyBg);
    }
  });
};

const observer = new IntersectionObserver(lazyLoadBg, {
  rootMargin: '0px',
  threshold: 0.1
});

lazyBgElements.forEach(lazyBg => {
  observer.observe(lazyBg);
});

3. 使用CSS设置元素的高度和背景样式：

.lazy-bg {
  height: 200px; /* 根据需要设置元素的高度 */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

通过以上代码示例，当元素进入视口时，会将背景图片的URL应用到元素的样式中，实现了背景图片的懒加载效果。