如何将背景图像拉伸到100％宽度

Question

我正在尝试在屏幕宽度上拉伸背景图像（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

Stack Snippet

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

这样做。只需用background-size：cover

替换background-size

欢呼声。

Answer 3

试试这个（添加到现有代码中）：

.footer-img {
    background-position: center top;
    background-size: 100%;
}

你最终会得到类似的东西： Example of your result