Search code examples
cssimageresponsive-designoverlaycenter

center image vertically/horizontally over another without dimensions

I'm trying to make an image appear to have a play button that is centered. I will not know the exact size of the main image however, since it's dynamically generated.

Right now, the overlay image (a play button) is in the upper left corner. How can I have the play button show centered horizontally and vertically?

Thank you.

<div class="videobox">
<img src="/mainimage.png">
<span></span>
</div>

.videobox { position: relative; }

.videobox span {
position:absolute;
left: 0px;
bottom: 0px;
width: 100%;
height: 100%;
z-index: 1;
background: transparent url(../img/elements/playbutton.png) no-repeat;
}
Solution 
  • .videobox span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  background: url(../img/elements/playbutton.png) no-repeat center center;
}