setting an image as a footer background in CSS

Question

So I'm looking to add a footer to my page but I want it to be a background-image that is automatically resized depending on the monitor resolution and have it with a 100% width and height but to never overflow to the sides, so I don't want scrollbars to appear. The image is .jpg.

Would appreciate some input as to what is the best way to go around this

Answer 1

Use the following CSS

​div {
    width: 100%;
    height: 400px;
    background-image: url(your-path-here.jpg);
    background-size: 100% 100%;
}​

And see this live example

Answer 2

Be careful, if you don't resize the height of your footer as well, that will stretch the image.

background-size will do the trick, but note that it' not supported by IE8 and older. Just to be on the safe side for these browsers, the image could be positioned in the center (that means at 50% horizontally and 50% vertically - of course, the center keyword also works)

Live demo: http://dabblet.com/gist/2790711