Search code examples
footer

Repeat footer background image horizontally to fill browser window

I'm racking my brain trying to figure this one out. I thought it was going to be easy : ) I simply want the Footer to extend the width of my browser window while the Footer Wrap contains the content within 960px, but for some reason it only fills to the 960px. Here's my code:

footer {
background: url(images/footerbkg.jpg) repeat-x bottom center;
width: 100%;
height: 1232px;

}

footer section.wrap {
width: 960px;
margin: 60px auto 0;
position: relative;
float: left;

}

Solution

  • Many sites' footers are contained within an overall wrapper. Make sure you've placed the footer div (or footer tag if you're using HTML5) outside of the wrapper. 100% width should fill the screen if it is.