How to stretch a background-image to 100% width

Question

I'm trying to stretch my background-image over the width of my screen (100%) but can't seem to make this work. 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> 

Answer 1

Use background-size: cover; instead of background-size: 100% 100%; to your .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> 

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

This would do. just replace the background-size with background-size:cover

cheers.

Answer 3

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