<!DOCTYPE html>
      .meme_container {
        position: relative;
      .meme_container img {
        z-index: 1;
      .meme_container .top_meme {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
      .meme_container .bottom_meme {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 2;

    <div class="meme_container">
      <img src="" />
      <p class="top_meme">This is a caption 1</p>
      <p class="bottom_meme">This is a caption 2</p>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter