如何將背景圖像拉伸到100％的寬度

Question

我正在嘗試在屏幕寬度（100％）上拉伸背景圖像，但似乎無法完成這項工作。 在這張照片中更清楚地看到我的意思： 圖片或網站也在線： 鏈接

我究竟做錯了什么？

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

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替換為background-size：cover

干杯。

Answer 3

試試看（添加到您現有的代碼中）：

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

您最終會得到類似以下內容的結果：