背景图片不会扩展到页脚

Question

So I am building my website. I added my banner , my footer but my background is getting messed up. It's not stretching out , there is some empty whitespace.

This is what happens:

If I use background-size: 100% , my background disappears. Same thing when I use background-size: cover;.

HTML:

<div class="content">
</div>
<div class="footer">
</div>

CSS:

.content {
min-height: 690px;   
background: url("background.png")
background-size: 100%;
}

.footer {
min-height: 200px;
background: url("footer.png");
background-repeat: repeat-x;
}

Answer 1

Instead of background-size: 100%, try background-size: cover. Cover will stretch the image to always fully fill its container, cropping any excess.

Answer 2

 .content { min-height: 690px; background: url("background.png"); background-size: 100% 100%; } .footer { min-height: 200px; background: url("footer.png"); background-repeat: repeat-x; } 

 <div class="content"> </div> <div class="footer"> </div> 

You have missed ; after background: url("background.png") .

Try this code.

Hope this helps.