Держите изображение в центре независимо от размера экрана?

Question

Вот fiddle Я создал. Я хочу, чтобы декоративный орнамент всегда оставался посередине экрана. Я не могу понять, как это сделать. Я попробовал обернуть его в div, но это тоже не сработало.

HTML

<span class="border-top"></span> 

CSS

.border-top { 
background: url("http://i.imgur.com/Txoi4sd.png") no-repeat; 
clear: both; 
display: block; 
height: 47px; 
margin-bottom: 50px; 
width: 100%; 
} 

Answer 1

.border-top { 
 
    background: url("http://i.imgur.com/Txoi4sd.png") center center no-repeat; 
 
    clear: both; 
 
    display: block; 
 
    height: 47px; 
 
    margin-bottom: 50px; 
 
    width: 100%; 
 
}

<span class="border-top"></span>

Это, вероятно, сделает трюк.

Ссылка: http://www.w3.org/TR/css3-background/#the-background

Answer 2

насчет http://jsfiddle.net/wkkrnqqx/1/

.border-top { 
    background: url("http://i.imgur.com/Txoi4sd.png") no-repeat; 
    display: block; 
    height: 47px; 
    margin-bottom: 50px; 
    width: 100%; 
    background-position:50% 0; 
}