From Wikipedia:

A spacer GIF is a small, transparent GIF image that is used in web design and HTML coding. They were used to control the visual layout of HTML elements on a web page, at a time when the HTML standard alone did not allow this. They became mostly obsolete after the browser wars-fueled addition of layout attributes to HTML 2.0 table tags, and were mostly unused by the time Cascading Style Sheets became widely adopted.

Why would one need to use a spacer.gif today, with CSS powers a-plenty?

If one were to need a background image which needed to be exposed as a graphic with alternative text for screen readers. For example…

See the Pen didja know you can give an image a background image? by Scott (@scottohara) on CodePen.

OK, that image didn’t actually need to be exposed. But, it was an example.

What is this example/hack showing?

  • img elements can have a transparent 1px by 1px source, but can also display an image via CSS background-image.
  • Using an img element rather than setting a background image on a div, or some other containing element, allows for the image itself to be exposed to the accessibility tree by giving it an accessible name via its alt attribute.
  • No worries of older browsers discarding the CSS background image in Windows High Contrast Mode. Cause we likely don’t want that.
  • CSS background-position and background-size work consistently in IE11+. Neat.
  • Couldn’t we use object-fit to do something similar? Yes. But, not if you needed to support IE11 or pre-Chromium Edge. Less neat.

Should you be doing this?

MEH? Situationally at best.

Typically background images really should be relegated to decorative purposes. The only reason I even thought about doing this, today, was because someone was asking if they could add an aria-label to a div to provide alternative text for a background image on a website.

And the answer to that question is no.

Naming a generic element, such as a div is prohibited and people need to cut that out.

Seriously.