CODEWITHSUNDEEP
htmlcss
Lucas Verhoest
Lucas Verhoest

Reputation: 275

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

Upvotes: 2

Views: 73

Answers (3)

Sergiu Ojoc
Sergiu Ojoc

Reputation: 1

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

Upvotes: 0

Ifeanyi Amadi
Ifeanyi Amadi

Reputation: 794

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

Upvotes: 0

Bhuwan
Bhuwan

Reputation: 16855

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>

Upvotes: 3

Related Questions