Search code examples
htmlcssfooterstyling

setting an image as a footer background in CSS

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

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