Question

I am working with some old table structure html that I am not allowed to change at the moment.

However, I wanted to add a css sprite play button on the video images using a span background image.

I am having trouble getting the play button images to line up inside of the video images with CSS. On the real site, they are all the way at the top of the page. I know that this is because of the absolute positioning.

My question is, how can I position these play button images within the specific video image.

Here is a jsfiddle with my code.

Answer 1

Try something like

a { display: block; position: relative; }
a span { position: absolute; left: 100px; top: 80px; }

http://jsfiddle.net/PyJXh/7/

This might not be the exact center, you need to set the correct left and top depending on your image.