HTML for Meme Making

I use the same basic process to make memes as I do to make book covers. A book cover is generally more sophisticated.

A meme, as assumed in this article, means text on an image to convey an idea.

In this article I'll describe how I make memes. The process for book covers can be extrapolated.

No dedicated image manipulation software is needed. No Photoshop or Gimp or Seashore or any of those. Only a web page and a screenshot.

To make the web page, use HTML and CSS. A solid color or gradient colors can be specified for the background or, optionally, an image can be used. Position the text for the meme.

When the meme is complete, make a screenshot of it. Now you have a meme to do with what you want.

For practice, we'll make two memes. The first meme has a color gradient background created with CSS. The second meme's background is an image.

Here are the two memes:

For both memes, a div with a background is created. Then the text is placed.

Here is the source code for the first meme. Its background is a color gradient.

<div style="position:relative; width:768px; height:512px; 
background:radial-gradient(white 10%, yellow 30%, orange 50%);">

<div style="position:absolute; left:0; right:0px; top:40px; text-align:center; 
font-size:43px; font-family:sans-serif; font-weight:bold; 
color:red;">
The nucleus is in the middle.
</div>

</div>

In the above source code, the CSS background property is used to specify the color gradient. Various types of gradients can be made. Techniques are presented at the Willmaster CSS Color Gradients library article and also at Mozilla's Using CSS Gradients.

The div with the gradient background contains another div. The inner div has the CSS position:absolute; declaration. It also declares the positioning of the text. And other CSS, including text color.

The text on the meme is in the inner div and is placed where the CSS says it should be placed.

You can see the result in the first example of this article.

For the second example, a background image is used instead of a color gradient. Here is the source code.

<div style="position:relative; width:768px; height:512px; 
background:url(https://willmaster.com/possibilities/images/Amonkeyeatinganapplewell_33360897.png);">

<div style="position:absolute; right:20px; top:20px; 
font-size:42px; font-family:sans-serif; font-weight:bold; 
color:black;">
An apple a day ...
</div>

<div style="position:absolute; left:440px; top:65px; 
font-size:36px; font-family:sans-serif; font-weight:bold; 
color:black;">
... no, the monkey will still come around.
</div>

</div>

Like the previous div, the background property is used. This time, the url(...) value is used to specify the URL of the image to place as the div's background.

This meme has two text items. Thus, it has two inner divs. Each inner div places one text item.

Each of the inner divs contains the CSS position:absolute; declaration. And other CSS, including text color.

You can see the result in the second example of this article.

(Note that the background image is exactly as it came out of the AI image generator. You are welcome to download it and use it as you wish.)

When you have a meme looking the way you want it, screenshot it. The result is an image to use as you wish.

Some browsers have screenshot features built in. Some operating systems do, too.

Your screenshot software or function may allow you to specify a section of the screen or window to copy. If yours does not, you'll either need to trim the resulting screenshot image or adjust your browser's window size to match the image size before taking the screenshot.

So, really, all there is to it is:

1. Make a div with a background.

2. In that div, put another div for the text. The inner div places your text as you specify.

3. Make a screenshot of the meme.

Once you've made a few memes, you should be able to whip another one out pretty fast.

(This content first appeared in Possibilities newsletter.)

Will Bontrager