我认为我正在创建一个简单的示例，以将svg片段显示为CSS背景图像。但是图像不会出现。我需要做些什么才能使这项工作？不管我做什么，背景图片都不会出现。

https://codepen.io/flyingl123/pen/dyywXRd?editors=1100

<div id="bg">
  Some content
</div>

<div id="svg-sprite">
  <svg xmlns="http://www.w3.org/2000/svg">
    <symbol viewBox="0 0 26 28" id="icon-star">
      <g>
        <path d="M0 10.109q0-0.578 0.875-0.719l7.844-1.141 3.516-7.109q0.297-0.641 0.766-0.641t0.766 0.641l3.516 7.109 7.844 1.141q0.875 0.141 0.875 0.719 0 0.344-0.406 0.75l-5.672 5.531 1.344 7.812q0.016 0.109 0.016 0.313 0 0.328-0.164 0.555t-0.477 0.227q-0.297 0-0.625-0.187l-7.016-3.687-7.016 3.687q-0.344 0.187-0.625 0.187-0.328 0-0.492-0.227t-0.164-0.555q0-0.094 0.031-0.313l1.344-7.812-5.688-5.531q-0.391-0.422-0.391-0.75z">
        </path>
      </g>
    </symbol>
  </svg>
</div>

#bg {
  padding: 20px;
  border: 1px solid red;
  background: url('#icon-star');
}

#bg svg {
  display: block;
}

#svg-sprite {
  height: 0;
  width: 0;
  position: absolute;
  visibility: hidden;
}