Css Background Position 50% 50% Does Not Work

There is an element, which width and height is not known. I would like to create a background in CSS, which is repeated, and starts at the center of the element. It should look lik

Solution 1:

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

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

JSFiddle

UPDATED (corners in center, webkit)Thanks, CBroe and Lovelock

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

body {
    background: url('http://www.lighthouse3d.com/wp-content/uploads/2011/03/crate.jpg');
    background-repeat: repeat;
    background-position: -webkit-calc(50% + 128px) -webkit-calc(50% + 128px); // 128 pixels is half of the background image
    background-position: calc(50% + 128px) calc(50% + 128px); // 128 pixels is half of the background image
}

JSFiddle

Solution 2:

No need to add additional css property. you will directly use this way

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

Solution 3:

try this one:

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;
}

DEMO HERE