html - 如何将背景图像拉伸(stretch)到 100% 宽度

Question

我正在尝试将我的背景图像拉伸(stretch)到我的屏幕宽度 (100%)，但似乎无法实现。在这张图片中更明显地看到我的意思:picture或者网站也在线:link

我做错了什么？

.footer-img {
  background-image: url(../assets/img/footer-splashes-01.svg);
  background-repeat: no-repeat;
  background-position: center bottom;
  /* width: 100%; */
  background-size: 100% 100%;
}

.container-footer {
  width: 96rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  text-align: right;
  padding-top: 25rem;
}

footer li {
  height: 8rem;
  list-style: none;
  text-decoration: none;
}

.social-media {
  padding-top: 5rem;
  display: flex;
  justify-content: space-between;
}

<footer>
  <div class="footer-img">
    <div class="container-footer">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Devine</a></li>
      </ul>
      <div class="social-media">
        <a href="http://www.devine.be"><img src="./assets/img/devine.png" alt="devine" width=50 height=50></a>
        <a href="http://www.facebook.com"><img src="./assets/img/facebook.png" alt="facebook" width=50 height=50></a>
        <a href="http://www.twitter.com"><img src="./assets/img/twitter.png" alt="twitter" width=50 height=50></a>
      </div>
    </div>
  </div>
</footer>

Answer 1

使用 background-size: cover; 而不是 background-size: 100% 100%; 到你的 .footer-img

堆栈片段

.footer-img {
  background-image: url(../assets/img/footer-splashes-01.svg);
  background-repeat: no-repeat;
  background-position: center bottom;
  /* width: 100%; */
  background-size: cover;
}

.container-footer {
  width: 96rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  text-align: right;
  padding-top: 25rem;
}

footer li {
  height: 8rem;
  list-style: none;
  text-decoration: none;
}

.social-media {
  padding-top: 5rem;
  display: flex;
  justify-content: space-between;
}

<footer>
  <div class="footer-img">
    <div class="container-footer">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Devine</a></li>
      </ul>
      <div class="social-media">
        <a href="http://www.devine.be"><img src="./assets/img/devine.png" alt="devine" width=50 height=50></a>
        <a href="http://www.facebook.com"><img src="./assets/img/facebook.png" alt="facebook" width=50 height=50></a>
        <a href="http://www.twitter.com"><img src="./assets/img/twitter.png" alt="twitter" width=50 height=50></a>
      </div>
    </div>
  </div>
</footer>