Html CSS背景位置50%50%不起作用

有一个元素，其宽度和高度未知。我想在CSS中创建一个背景，它是重复的，从元素的中心开始。应该是这样的：

我的代码是：

body {
    background: url('http://www.lighthouse3d.com/wp-content/uploads/2011/03/crate.jpg') 50% 50% / 100% 100% repeat;
}

更新（中间角落，webkit） 谢谢，CBroe和Lovelock

试试这个：

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
}

body {
    background: url('http://www.lighthouse3d.com/wp-content/uploads/2011/03/crate.jpg');

    background-position: center;
}

---

无需添加其他css属性。您将直接使用这种方式

body {
    background: url('http://www.lighthouse3d.com/wp-content/uploads/2011/03/crate.jpg');
}

---

我想他们希望图像的四个角在中心相遇…@CBroe还提到使用-webkit-calc。除非将Safari用于calc，否则Safari始终存在问题。如果您修改图像使中心部分已经位于中心位置，这将更容易实现。（不知道这是否是选项，你没有具体的条件太多。）我会修改图像如果你需要你会添加背景重复：重复；财产

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
}

body {
    background: url('http://www.lighthouse3d.com/wp-content/uploads/2011/03/crate.jpg');

    background-position: center;
}

body {
    background: url('http://www.lighthouse3d.com/wp-content/uploads/2011/03/crate.jpg');
}