Как разместить кнопку в центре слева от фонового изображения?

Question

Вот моя кнопка: http://jsfiddle.net/cRqhT/120/

HTML:

<a id="button" href="http://example.com"</a> 

CSS:

#button{ 
    display: block; 
    width: 121px; 
    height: 40px; 
    background: url(https://gator1174.hostgator.com/~mskparik/facebook/1.png) no-repeat top; 
} 
#button:hover { 
    background: url(https://gator1174.hostgator.com/~mskparik/facebook/2.png) no-repeat bottom; 
    } 

Вот фон: http://b.dryicons.com/files/graphics_previews/shining_background.jpg

Как разместить свою кнопку над фоном в середине слева?

Answer 1

Вы пропускаете> с вашего якоря:

<a id="button" href="http://mysite.com"></a> 

Одним из решений было бы поставить якорь в контейнер с этим фоном и абсолютное положение якоря:

<div> 
    <a ... ></a> 
</div> 


.div { position:relative; background:transparent url('myUrl.png') no-repeat; } 
a { position:absolute; top:XXpx; left:0; } 

Где делитель имеет ту же высоту и ширину, что и фоновое изображение, а XXpx равно высоте анкера, вычитаемой из высоты изображения, разделенной на две части.

JSFiddle example.