[英]How to stretch a background-image to 100% width
I'm trying to stretch my background-image over the width of my screen (100%) but can't seem to make this work. 我正在尝试在屏幕宽度(100%)上拉伸背景图像,但似乎无法完成这项工作。 It's more visible in this picture to see what I mean: picture or the website is online aswell: link
在这张照片中更清楚地看到我的意思: 图片或网站也在线: 链接
What am I doing wrong? 我究竟做错了什么?
.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>
Use background-size: cover;
使用
background-size: cover;
instead of background-size: 100% 100%;
而不是
background-size: 100% 100%;
to your .footer-img
到您的
.footer-img
Stack Snippet 堆栈片段
.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>
.footer-img {
background-image: url(../assets/img/footer-splashes-01.svg);
background-repeat: no-repeat;
background-position: center bottom;
width: 100%;
background-size: cover;
}
This would do. 这样就可以了。 just replace the background-size with background-size:cover
只需将background-size替换为background-size:cover
cheers. 干杯。
Try this (add to your existing code): 试试看(添加到您现有的代码中):
.footer-img {
background-position: center top;
background-size: 100%;
}
You will end-up with something like: Example of your result 您最终会得到类似以下内容的结果:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.