Html 在 CSS 中将图像设置为页脚背景

setting an image as a footer background in CSS

提问by Nosayr Yassin

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.

所以我想在我的页面中添加一个页脚，但我希望它是一个背景图像，根据显示器分辨率自动调整大小，并使其具有 100% 的宽度和高度，但永远不会溢出到两侧，所以我不想出现滚动条。图像是.jpg。

Would appreciate some input as to what is the best way to go around this

希望得到一些关于解决这个问题的最佳方法的意见

回答by Hymantheripper

Use the following CSS

使用以下 CSS

?div {
    width: 100%;
    height: 400px;
    background-image: url(your-path-here.jpg);
    background-size: 100% 100%;
}?

And see this live example

看看这个活生生的例子

回答by Ana

Be careful, if you don't resize the height of your footer as well, that will stretch the image.

请注意，如果您不调整页脚的高度，则会拉伸图像。

background-sizewill 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)

background-size可以解决这个问题，但请注意，IE8 及更早版本不支持它。为了对这些浏览器安全起见，图像可以放置在中心（这意味着水平 50% 和垂直 50% - 当然， center 关键字也有效）

Live demo: http://dabblet.com/gist/2790711

现场演示：http: //dabblet.com/gist/2790711