CODEWITHSUNDEEP
htmlcssfooterstyling
Nosayr Yassin
Nosayr Yassin

Reputation: 419

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

Upvotes: 9

Views: 56725

Answers (2)

Ana
Ana

Reputation: 37169

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

Upvotes: 1

jacktheripper
jacktheripper

Reputation: 14219

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

Upvotes: 14

Related Questions