CSS+No se ve la imagen sobre un background con efecto hover

[Bombolone]

Hola, de antemano te agradezco por la onda y tu respuesta, te explico un toque.

voy a tratar de explicar lo mejor posible.

Es un html con 3 botones, mas que botones serian como secciones, yo los llamo botones grandes, porque incluyen un fondo con rollover (osea una imagen de background q cuando pasas por enciama cambia) y en el contenido de ese cuadrado la mitad superior lleva una imagen con un titulo hecho todo en png , y la parte inferior texto.

seria algo asi:
http://www.apple.com/ipod/ (los cuadraditos de ipod nano, ipod shouffle y Airplay TV)

a modo estructura:

--------------------------------------
i Titulo del cuadrado i
i i
i IMAGEN i
i i
--------------------------------------
i aca va todo texto segun i
i la seccion i
i i
i i
--------------------------------------

el div class es "shorcuts_container" y dentro posee 3 div id los cuales 2 son: "shorcuts" y uno es "shorcuts2" , los mismos poseen definido lo siguiente:
#shorcuts {
background: url(images/shorcut.jpg) no-repeat;
background-position:0 0;
width: 310px;
height: 270px;
display: block;
text-indent: -9999px;
float:left;
position:relative;
z-index:1;

}

#shorcuts:hover { background-position: 0 -270px; }

La idea de eso es que el background cambie, lo que hice es poner una imagen de 310 x 540px (son 2 imagenes pegadas 1 arriba y 1 abajo) cuando haces hover baja -270px de coordenadas y muestra la parte de abajo de la imagen, es una replica mas oscura, para dar el efecto de "hover"

todo esto sucede solo en el fondo, pero el contenido seria la imagen:
images/ES_shorcuts_web_cards.png
la cual no la muestra cuando la pongo dentro.


Saludos y gracias!