setting an image as a footer background in CSS

css, footer, html, styling

Solution

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

Problem

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

Original source