setting an image as a footer background in CSS

Nosayr Yassin picture Nosayr Yassin · May 25, 2012 · Viewed 43k times · Source

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

jacktheripper picture jacktheripper · May 25, 2012

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