17

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;
}
user749798
  • 5,210
  • 10
  • 51
  • 85

1 Answers1

43
.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;
}
xiaoyi
  • 6,641
  • 1
  • 34
  • 51
  • 9
    If your website is responsive, so that the image size is dynamic, you can add for instance "background-size: 35%;" to make the size of the play-button relative to the size of the image. – Chris Jun 03 '13 at 08:06
  • 1
    @up Remember that background-size has to come AFTER background. Also, the code above centered the play button only vertically. To center it horizontally I had to add "display: inline-block" to .videobox rule from the question. Check https://jsfiddle.net/t0u1j2th/1/. – user1 Apr 24 '16 at 10:47