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

Question

我想在我的网页中添加页脚，但希望它是一个背景图片，能根据显示器的分辨率自动调整大小，具有100％的宽度和高度，但不会溢出到两侧，因此我不希望出现滚动条。 图片格式为.jpg。

请问如何最好地实现这个效果？

- Nosayr Yassin

Answer 1

使用以下CSS

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

你可以查看这个示例

- jacktheripper

Answer 2

注意，如果您不调整页脚的高度，那么图片将被拉伸。

background-size可以解决这个问题，但请注意它不支持IE8及更早版本。为了在这些浏览器上保险起见，可以将图像定位在中心（也就是水平和垂直方向都是50% - 当然，center关键字也可以使用）

演示链接：http://dabblet.com/gist/2790711

- Ana

---

图片已不再托管。 - Ben Taliadoros