Положение фона CSS 50% 50% не работает

Question

Существует элемент, ширина и высота которого неизвестны. Я хотел бы создать фон в CSS, который повторяется и начинается в центре элемента. Он должен выглядеть следующим образом:

Мой код:

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

https://jsfiddle.net/5omLL24d/

Answer 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

ОБНОВЛЕНО (углы в центре, 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-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

Answer 2

попробовать это один:

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

Answer 3

Нет необходимости добавлять дополнительное свойство CSS. вы будете напрямую использовать этот способ

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