垂直居中背景图像

Question

我无法弄清楚如何将图像居中。当我使用'中心'作为背景位置时，它被切断，女孩的头部没有显示。咳。

body {
    background: url(http://media.silabg.com/uf/common/catch-the-sun01.jpg) no-repeat center center;
}

http://jsfiddle.net/TomasRR/xvjdow6j/

有什么想法吗？

Answer 1

定义一些高度，以便图像知道它应该如何/在哪里居中：

html {
    height: 500px;
}

body {
    background: url("http://media.silabg.com/uf/common/catch-the-sun01.jpg") no-repeat center;
    height: 100%;
    width: 100%;
}

http://jsfiddle.net/az6x908x/

Answer 2

如果您尝试水平和垂直居中放置图像，可以尝试：

body {
    background: url(http://media.silabg.com/uf/common/catch-the-sun01.jpg) no-repeat center center fixed;
}

这是你在找什么？

Answer 3

这将使背景图像垂直和水平居中。检查 DEMO 。

body {
    background: url(http://media.silabg.com/uf/common/catch-the-sun01.jpg) no-repeat 50% 50% fixed;
}