setting an image as a footer background in CSS

html css footer styling
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

Related questions

Bootstrap 3 Flush footer to bottom. not fixed

I am using Bootstrap 3 for a site I am designing. I want to have a footer like this sample. Sample Please note that I don't want it FIXED so bootstrap navbar-fixed-bottom does not solve my problem. I just want it …

Read More
How to align footer (div) to the bottom of the page?

Can anyone explain how to align a footer div to the bottom of the page. From the examples I've seen, they all show how to make the div stay visible at the bottom, no matter where you've scrolled the page. …

Read More
Fixed footer in Bootstrap

I'm trying out Bootstrap and I was wondering, how I can fix the footer on the bottom without having it disappear from the page if the content is scrolled?

Read More